Select component that allows users to select a single option from a list of options.
Select component comes in three sizes: small, large. The default size is small.
The select component can have a status of error, success, disabled, loading.
The select component supports extensive customization beyond the default variants. This section demonstrates practical styling techniques and advanced customization patterns.
For simple customizations, use CSS custom properties directly on the component:
Create select fields that automatically adapt to different themes:
For more complex styling, use CSS classes that work with the component's CSS parts. Experiment with custom select styling using CSS parts and custom properties. Try the presets below or create your own styles:
CSS Editor
Live Preview
Apple
Pear Fresh
import { DapDSSelect } from 'dap-design-system'
import { DapDSSelectReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSSelect } from 'dap-design-system/components'
| 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 |
| Name | Description |
|---|---|
(default) | The option list of the select. |
indicator-icon | The indicator icon of the select. |
| Event Name | Description | Type |
|---|---|---|
dds-change | Fired when the select value changes. | {value: string } |
dds-blur | Emitted when the select loses focus. | {void } |
dds-focus | Emitted when the select gains focus. | {void } |
dds-opened | Emitted when the select dropdown is opened. | {void } |
dds-closed | Emitted when the select dropdown is closed. | {void } |
| 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. |
popup-base | The base of the popup. |
option-list | The option list of the select. |
option-item | The option item of the select. |
option-item-base | The base of the option item. |
option-item-label | The label of the option item. |
option-item-prefix | The prefix of the option item. |
option-item-suffix | The suffix of the option item. |
indicator-icon | The indicator icon of the select. |
mobile-tray | The mobile tray of the select. |
mobile-content | The mobile content of the select. |
mobile-body | The mobile body of the select. |
mobile-header | The mobile header of the select. |
mobile-footer | The mobile footer of the select. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-select::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-select::part(base),
.my-custom-dap-ds-select::part(trigger) {
/* Shared styles */
}
Example usage:
<dap-ds-select class="my-custom-dap-ds-select">
Select
</dap-ds-select>
.my-custom-dap-ds-select::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-select-min-height | Minimum height of the select component (default: var(--dds-spacing-1000)) |
--dds-select-padding | Padding of the select component (default: var(--dds-spacing-300)) |
--dds-select-column-gap | Column gap of the select component (default: var(--dds-spacing-100)) |
--dds-select-border-color | Border color of the select component (default: var(--dds-border-neutral-base)) |
--dds-select-border-radius | Border radius of the select component (default: var(--dds-radius-base)) |
--dds-select-bg-color | Background color of the select component (default: var(--dds-background-neutral-subtle)) |
--dds-select-text-color | Text color of the select component (default: var(--dds-text-neutral-base)) |
--dds-select-icon-right | Right position of the icon (default: var(--dds-spacing-200)) |
--dds-select-icon-color | Color of the icon (default: var(--dds-icon-neutral-subtle)) |
--dds-select-text-margin-right | Right margin of the text (default: var(--dds-spacing-600)) |
--dds-select-disabled-border-color | Border color when disabled (default: var(--dds-background-neutral-stronger)) |
--dds-select-disabled-bg-color | Background color when disabled (default: var(--dds-background-neutral-stronger)) |
--dds-select-disabled-text-color | Text color when disabled (default: var(--dds-text-neutral-disabled)) |
--dds-select-error-border-color | Border color in error state (default: var(--dds-border-negative-base)) |
--dds-select-success-border-color | Border color in success state (default: var(--dds-border-positive-base)) |
--dds-select-xs-min-height | Minimum height for extra small size (default: var(--dds-spacing-800)) |
--dds-select-xs-padding | Padding for extra small size (default: var(--dds-spacing-200)) |
--dds-select-xs-font-size | Font size for extra small size (default: var(--dds-font-sm)) |
--dds-select-lg-min-height | Minimum height for large size (default: var(--dds-spacing-1200)) |
--dds-select-lg-padding | Padding for large size (default: var(--dds-spacing-400)) |
--dds-select-lg-font-size | Font size for large size (default: var(--dds-font-lg)) |
--dds-select-lg-icon-right | Right position of the icon for large size (default: var(--dds-spacing-300)) |
--dds-select-lg-icon-color | Color of the icon for large size (default: var(--dds-text-icon-neutral-subtle)) |
--dds-select-popup-bg-color | Background color of the popup (default: var(--dds-background-neutral-subtle)) |
--dds-select-icon-opened-transform | Transform of the icon when the select is opened (default: rotate(90deg)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-select
style="--dds-select-min-height: value; --dds-select-padding: value;">
Select
</dap-ds-select>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-select {
--dds-select-min-height: value;
--dds-select-padding: value;
--dds-select-column-gap: value;
}
<dap-ds-select class="my-custom-dap-ds-select">
Select
</dap-ds-select>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-select {
--dds-select-min-height: value;
--dds-select-padding: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
| Property | Type | Default | Description |
|---|---|---|---|
selected | boolean, undefined | The selected state of the option item | |
selectable | string | 'true' | Wheteher the item is selectable, whether it shows the selected icon |
selectedIconPosition | string | 'suffix' | The position of the selected icon |
value | any, undefined | The value of the option item | |
disabled | boolean, undefined | The disabled state of the option item | |
focused | boolean, undefined | The focused state of the option item | |
label | string, undefined | The label of the option item, it can be a simplier version of an item |
| Name | Description |
|---|---|
prefix | The prefix of the option item. |
(default) | The label of the option item. |
suffix | The suffix of the option item. |
No custom events available.
| Part Name | Description |
|---|---|
base | The main option item container. |
prefix | The prefix of the option item. |
label | The label of the option item. |
suffix | The suffix of the option item. |
| Property Name | Description |
|---|---|
--dds-option-item-padding-vertical | The vertical padding of the option item. |
--dds-option-item-padding-horizontal | The horizontal padding of the option item. |
--dds-option-item-border-radius | The border radius of the option item. |
--dds-option-item-color | The text color of the option item. |
--dds-option-item-hover-bg | The background color of the option item when hovered. |
--dds-option-item-active-bg | The background color of the option item when active. |
--dds-option-item-disabled-color | The text color of the option item when disabled. |
--dds-option-item-high-contrast-border | The border color of the option item in high contrast mode. |
--dds-option-item-selected-font-weight | The font weight of the option item when selected. |
--dds-option-item-xs-font-size | The font size of the option item in extra small size. |
--dds-option-item-lg-font-size | The font size of the option item in large size. |
--dds-option-item-selected-icon-width | The width of the selected icon. |
