DÁP Design System - Select webcomponent

Select

Select component that allows users to select a single option from a list of options.

Design system docs

Examples

Default select field

<dap-ds-select label="Select a fruit">
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
<dap-ds-option-item value="item2">Peach</dap-ds-option-item>
<dap-ds-option-item value="item3" disabled>Cherry</dap-ds-option-item>
<dap-ds-option-item value="item4">
  <dap-ds-icon-home-6-line slot="prefix"></dap-ds-icon-home-6-line>
  Strawberry
</dap-ds-option-item>
</dap-ds-select>

Sizes

Select component comes in three sizes: small, large. The default size is small.

<dap-ds-stack>
<dap-ds-select
size="xs"
label="Select an extra small fruit"
description="This is an extra small select field"
feedback="This is a feedback message"
feedbacktype="negative"
>
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
</dap-ds-select>

<dap-ds-select
label="Select a small fruit"
description="This is a small select field"
feedback="This is a feedback message"
feedbacktype="negative"
>
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
</dap-ds-select>

<dap-ds-select
size="lg"
label="Select a large fruit"
description="This is an large select field"
feedback="This is a feedback message"
feedbacktype="negative"
>
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item></dap-ds-select>
</dap-ds-stack>

Statuses

The select component can have a status of error, success, disabled, loading.

<>
<dap-ds-select
status="error"
label="Wrong fruits">
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
</dap-ds-select>

<dap-ds-select
status="success"
label="Good fruits">
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
</dap-ds-select>

<dap-ds-select
disabled
label="Do not select fruits">
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
</dap-ds-select>

<dap-ds-select
loading
label="Fruits are loading">
<dap-ds-option-item value="item0">
  Apple
</dap-ds-option-item>
<dap-ds-option-item value="item1">Pear</dap-ds-option-item>
</dap-ds-select>
</>

Importing

import { DapDSSelect } from 'dap-design-system/dist/dds'

Importing React

import { DapDSSelectReact } from 'dap-design-system/dist/react'

Attributes

Property	Type	Default	Description
`placement`	`'top'`, `'top-start'` , `'top-end'` , `'right'` , `'right-start'`, `'right-end'` , `'bottom'` , `'bottom-start'` , `'bottom-end'` , `'left'` , `'left-start'` , `'left-end'`	`'bottom-start'`	The popup placement of the select
`opened`	`boolean`	`false`	Whether the select dropdown is opened.
`placeholder`	`string`, `null`		The placeholder of the select.
`sync`	`boolean`, `undefined`		The sync size of the select dropdown
`isMobile`	`boolean`, `undefined`	`false`	Whether the select is in mobile mode.
`loading`	`boolean`, `undefined`	`false`	The loading state of the select.
`maxHeight`	`number`, `undefined`		The max heigth of the select dropdown.
`noAnimation`	`boolean`, `undefined`	`false`	Whether the select dropdown indicator is animated or not
`floatingStrategy`	`'absolute'`, `'fixed'`	`'absolute'`	The floating strategy of the select dropdown
`value`	`string`		The value of the select.
`label`	`string`		The label of the select.
`description`	`string`		The description of the select.
`tooltip`	`string`		The tooltip of the select.
`tooltipPlacement`	`'top'`, `'right'` , `'bottom'` , `'left'`		The tooltip placement of the select.
`size`	`'xs'`, `'sm'` , `'lg'`		The size of the select. Default is `sm`.
`disabled`	`boolean`		Whether the select is disabled.
`required`	`boolean`		Whether the select is required.
`readonly`	`boolean`		Whether the select is readonly.
`autofocus`	`boolean`		Whether the select is autofocus.
`feedback`	`string`		The feedback of the select.
`feedbackType`	`negative`, `positive` , `warning`		The feedback type of the select. Can be `negative`, `positive`, or `warning`.
`status`	`string`		The status of the select. Can be `success` or `error`.
`optional`	`boolean`		The optional state of the select.
`optionalLabel`	`string`		The optional label of the select.
`subtle`	`boolean`		The weight of the label. Default is `false`

Slots

Name	Description
`(default)`	The option list of the select.
`indicator-icon`	The indicator icon of the select.

Events

Event Name	Description
`dds-change`	Fired when the select value changes.
`dds-blur`	Emitted when the select loses focus.
`dds-focus`	Emitted when the select gains focus.

CSS Parts

Part Name	Description
`base`	The main select container.
`trigger`	The trigger button of the select.
`label`	The label of the select.
`description`	The description of the select.
`feedback`	The feedback of the select.
`tooltip`	The tooltip of the select.
`option-list`	The option list of the select.