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-select
  label="Select a small 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-select>

<dap-ds-select
  size="lg"
  label="Select a large 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-select>
</>

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'

Slots

No slots available.

Attributes

Property	Type	Default	Description
`value`	`string`		The value of the select.
`placeholder`	`string null`		The placeholder of the select.
`placement`	`PopupPlacement`	`'bottom-start'`	The placement of the select dropdown. Default is 'bottom-start'. Can be 'top', 'top-start', 'top-end', 'right', 'right-start', 'right-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end'.
`opened`	`boolean`	`false`	Whether the select dropdown is opened.
`sync`	`boolean`		The sync mode of the select dropdown. How the dropdown item size is synced to the trigger element. Default is `both`. Can be `width`, `height`, or `both`.
`label`	`string`		The label of the select.
`description`	`string`		The description of the select.
`tooltip`	`string`		The tooltip of the select.
`size`	`'sm' 'lg'`		The size of the select. Default is `sm`. Can be `sm` or `lg`.
`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.
`loading`	`boolean`	`false`	Whether the select is loading.
`maxHeight`	`number`		The max height of the floating dropdown.
`feedback`	`string`		The feedback of the select.
`feedbackType`	`'info' 'success' 'error'`		The feedback type of the select. Can be `info`, `success`, or `error`.
`isMobile`	`boolean`	`false`	Whether the select is in mobile mode.
`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`
`noAnimation`	`boolean`	`false`	The animation state of the select. Default is `false`

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.