Single or multi choice field that composes Option List. Rows use List Item chrome. Configure width and open-list sizing. Closed list selection, not free-text autocomplete.
Also known as: dropdown, dropdown select, select menu, multi select, single select dropdown
Install with the CLI, or copy the component source into your project.
Add select (npm)
1npx --yes -p @default-file/ui df-ui add select
Pre-select state: placeholder in the trigger until a value is chosen.
Primary surface field and secondary soft wash. Secondary keeps full-contrast value text with no border.
Inherits the theme hover border. Override with hoverBorderColor, or set hoverBorder false.
Outside label with required mark, optional help, and supporting hint text. Hint accepts a string or custom node; color via hintColor.
This is a hint text to help user.
Title with supporting subtext above the control. Subtext accepts a string or any custom node.
Compact label on the top border with a surface-colored notch. Configure inset, size, padding, and notch fill with overlap props.
Muted title stacked above the value inside the trigger. Inset uses a roomier padding recipe. Override with SelectTrigger padding props; tune label size and gap with insetLabelSize and insetGap.
Decorative icon at the start of the trigger, before the value.
Icons on each row via SelectItem leading from Option List. Mirror the selected icon on SelectTrigger with leadingIcon.
Compose kit Badge beside the option label in SelectItem. The registered label shows the same pill in SelectValue.
SelectItem layout stacked with leading. List leading aligns to the title line. SelectTrigger leadingIcon mirrors the selection; SelectValue stacks when the selected item layout is stacked. Static open preview.
Non-interactive state with a muted fill, hairline border, and muted value text. With outside label and hint, or trigger only.
This field is currently unavailable.
Invalid field chrome with a muted hint. Default tints the label. invalidLabel false keeps the label at its normal color.
Choose an active teammate from the list.
Choose an active teammate from the list.
Configure root width with the width prop: hug, fill, or a CSS length such as 9rem. Fill and fixed menus match the trigger by default; hug menus hug option content. Fixed widths truncate long labels.
Configure open-list width with SelectContent alignItemWithTrigger. Omit it to follow the Select width mode, or pass false to hug option content under a fill or fixed field.
Small, medium, and large trigger heights.
Axis and per-side padding via spacing tokens.
Selected state as plain text: count plus supporting detail (for example user totals).
Selected people as high-contrast removable badges. Fixed width wraps chips onto new lines. The menu matches the field width.
Menu left edge lines up with the trigger. Use when the list is wider than the control.
Menu is centered on the trigger.
Menu right edge lines up with the trigger.
Picks left, centre, or right, and flips above or below, based on available space.
Select composes Option List for the open panel. SelectItem rows use List Item chrome; see the List Item page for size, muted or accent variants, asChild hosts, and fully configurable standalone rows. Configure root width, field chrome, trigger, value display, content, and items below. Root width sets the trigger; open-list width follows that mode unless SelectContent overrides alignItemWithTrigger. The trigger is a combobox with full keyboard support inherited from Option List.
Root state for single or multi choice, open state, width, disabled, and validation.
| Prop | Type | Default | Notes |
|---|---|---|---|
| selectionMode | "single" | "multiple" | "single" | Single value or multiple values. |
| value | string | null | - | Controlled value in single mode. |
| defaultValue | string | null | null | Uncontrolled initial value in single mode. |
| onValueChange | (value: string | null) => void | - | Called when the single value changes. |
| values | string[] | - | Controlled values in multiple mode. |
| defaultValues | string[] | - | Uncontrolled initial values in multiple mode. |
| onValuesChange | (values: string[]) => void | - | Called when multiple values change. |
| open | boolean | - | Controlled open state for the option list. |
| defaultOpen | boolean | false | Uncontrolled initial open state. |
| onOpenChange | (open: boolean) => void | - | Called when the panel opens or closes. |
| closeOnSelect | boolean | - | Close after choosing a row. Defaults to true in single mode, false in multiple. |
| width | "hug" | "fill" | string | "hug" | Root and trigger width. hug sizes to the value. fill stretches to the parent. Pass a CSS length such as 12rem for a fixed width. Fill and fixed also default the open list to match the trigger; hug defaults the list to hug option content. Override with SelectContent alignItemWithTrigger. |
| itemChrome | ListItemChromeProps | - | Default List Item chrome for every SelectItem (padding, gap, type size/family/weight/color, radius, fills, and stroke). Forwarded to OptionList. Per-item chrome props on SelectItem win. See List Item for the full chrome contract. |
| disabled | boolean | false | Non-interactive state with a muted fill, hairline border, and muted value text. Keeps the menu closed. |
| invalid | boolean | false | Validation state. Sets aria-invalid on the trigger and applies the destructive border with --focus-ring-error. Hint text stays muted. |
Optional label, subtext, and hint. Labels can sit above the control, overlap the top border, or stack inside the trigger.
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | ReactNode | - | Field title. outside renders above the control. overlap sits on the top border with a notch. inset stacks above the value inside the trigger. |
| labelPosition | "outside" | "overlap" | "inset" | "outside" | outside places the label above the field. overlap pins a compact label on the top border with a surface-colored notch. inset stacks a muted label above the value inside the trigger chrome. |
| subtext | ReactNode | - | Secondary supporting line. With outside, uses the kit Label subtext slot under the title. With overlap or inset, renders above the control. Pass a string or any custom node. |
| required | boolean | - | Shows the required mark on the label. |
| help | ReactNode | - | Help control after the label (for example SelectFieldHelp inside a Tooltip). With overlap or inset, sits beside the field title. |
| hint | ReactNode | - | Supporting text below the control. Pass a string or any custom node. Omit to hide. Stays muted in the invalid state. |
| hintColor | string | - | Hint color. Prefer tokens such as var(--muted-foreground). Sets --df-select-hint. |
| hintClassName | string | - | Additional classes on the hint line. |
| hintId | string | - | Id for the hint; pair with the describedby ARIA attribute on the trigger. |
| labelColor | string | - | Owned label color. Prefer tokens such as var(--foreground) or var(--muted-foreground). Sets --df-select-label. Overlap and inset default to muted-foreground. |
| labelClassName | string | - | Additional classes on the owned Label. |
| labelInsetAlign | "left" | "content" | "custom" | "left" | Outside label inset. Forwards to Label insetAlign. content uses --df-label-inset-content on the field, which tracks --df-select-overlap-inset and --df-control-content-inset-inline. |
| labelInsetSize | string | - | Outside label custom inset. Forwards to Label insetSize when labelInsetAlign is custom. |
| invalidLabel | boolean | true | When Select invalid is true, tint the owned label with the error color. Set false to keep the label at its normal color. |
| errorLabelColor | string | - | Owned label color when invalid and invalidLabel are true. Prefer tokens such as var(--destructive). Sets --df-select-error-label. |
| overlapLabelBackground | string | - | Notch fill behind the overlap label. Match the surface behind the field. Prefer tokens such as var(--background). Sets --df-select-overlap-label-bg. |
| overlapInset | string | - | Distance from the trigger leading edge to the overlap label. Prefer spacing tokens. Align with trigger paddingLeft. Sets --df-select-overlap-inset. |
| overlapLabelPadding | string | - | Horizontal padding on the overlap label chip so the border notch clears the text. Prefer spacing tokens. Sets --df-select-overlap-label-pad. |
| overlapLabelSize | string | - | Overlap label font size. Prefer type tokens such as var(--df-text-11). Sets --df-select-overlap-label-size. |
| insetLabelSize | string | - | Inset label font size. Prefer type tokens such as var(--df-text-11). Sets --df-select-inset-label-size. |
| insetGap | string | - | Vertical gap between the inset label and the value. Prefer spacing tokens. Sets --df-select-inset-gap. |
| htmlFor | string | - | Associates the label with the trigger id. |
| className | string | - | Layout width and spacing for the field shell. |
Combobox host for the visible control. Variant, sizes, padding, width, radius, and truncation are configured here.
| Prop | Type | Default | Notes |
|---|---|---|---|
| variant | "primary" | "secondary" | "primary" | primary is a surface fill with a hairline border. secondary is a soft secondary wash with secondary-foreground value text and a transparent border. |
| size | "sm" | "md" | "lg" | "default" | "md" | T-shirt height and type size. "default" is an alias for "md". |
| padding | string | - | Padding on all sides. Prefer spacing tokens such as calc(2 * var(--spacing-unit)). Sets each --df-select-padding-* side. Inset label position uses a roomier default recipe; these props override it. |
| paddingX | string | - | Horizontal padding. Sets --df-select-padding-left and --df-select-padding-right. Overrides padding on those sides. |
| paddingY | string | - | Vertical padding. Sets --df-select-padding-top and --df-select-padding-bottom. Overrides padding on those sides. |
| paddingTop | string | - | Top padding. Prefer spacing tokens. Sets --df-select-padding-top and wins over paddingY and padding. |
| paddingRight | string | - | Right padding. Prefer spacing tokens. Sets --df-select-padding-right and wins over paddingX and padding. |
| paddingBottom | string | - | Bottom padding. Prefer spacing tokens. Sets --df-select-padding-bottom and wins over paddingY and padding. |
| paddingLeft | string | - | Left padding. Prefer spacing tokens. Sets --df-select-padding-left and wins over paddingX and padding. |
| leadingIcon | ReactNode | - | Decorative icon at the start of the trigger, before SelectValue. |
| background | string | - | Trigger fill. Prefer tokens such as var(--background). Sets --df-select-bg and overrides the variant recipe. |
| borderColor | string | - | Trigger border color. Prefer tokens such as var(--input). Sets --df-select-border. |
| hoverBorder | boolean | - | Instance hover border. Omit to inherit the theme. Set false to keep the resting border. Set true to force the hover border on. When set, the control writes data-hover-border; omit to inherit data-df-hover-border from the host. |
| hoverBorderColor | string | - | Hover border color when hover is active. Prefer tokens such as var(--foreground). Sets --df-select-hover-border. Focus and invalid borders take priority. |
| errorBorderColor | string | - | Invalid border color. Prefer tokens such as var(--destructive). Sets --df-select-error-border. |
| disabled | boolean | - | Overrides Select disabled when set on the trigger. |
| invalid | boolean | - | Overrides Select invalid when set on the trigger. Also accepts aria-invalid. |
| className | string | - | Extra classes for shape and polish. Prefer Select width for hug, fill, or fixed sizing. Radius override examples: rounded-xl or rounded-full. Default radius uses the kit --radius-4xl token. |
| id | string | - | For label association and accessibility. |
| aria-describedby | string | - | Point at SelectField hintId when a hint is shown. |
| aria-invalid | boolean | "true" | "false" | - | Native invalid flag. Merged with Select invalid and the trigger invalid prop. |
Shows the placeholder, selected label, or a custom render. When the selected SelectItem uses layout stacked with secondary, the trigger mirrors that stack. Compose kit Badge beside the label in SelectItem children to show a status pill in the trigger and list.
| Prop | Type | Default | Notes |
|---|---|---|---|
| placeholder | string | - | Pre-select copy when no value is chosen. |
| children | ReactNode | ((ctx) => ReactNode) | - | Static content or a render function with selectionMode, value, values, labelFor, secondaryFor, layoutFor, and toggleValue. Omit to use the label registered from SelectItem, including any Badge composed into that label. Default single-select render stacks title and description only when the selected item layout is stacked. |
| className | string | - | Value text styles. Truncation follows a fixed width trigger. |
Multi-select summary used inside SelectValue.
| Prop | Type | Default | Notes |
|---|---|---|---|
| count | number | - | Primary count text, for example "2 selected". |
| supportingText | ReactNode | - | Muted secondary detail, for example "16 users". |
Multi-select chip used inside SelectValue. For a status pill on a single selection, compose Badge inside SelectItem children instead.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Selected option value; remove toggles this value off. |
| children | ReactNode | - | Badge label. Defaults to the registered option label. |
| onRemove | (value: string) => void | - | Optional custom remove handler instead of toggleValue. |
Open Option List panel. Same API as OptionListContent, including alignItemWithTrigger and searchBackground for the search field fill.
| Prop | Type | Default | Notes |
|---|---|---|---|
| align | "start" | "center" | "end" | "auto" | "start" | Horizontal anchor relative to the trigger. auto picks the best fit. |
| alignItemWithTrigger | boolean | - | Configure open-list width. true matches the trigger. false hugs the longest option (floored at --df-menu-min-width). Omit to follow the root width prop: hug defaults to false; fill and fixed default to true. |
| side | "top" | "bottom" | "left" | "right" | "bottom" | Preferred placement side. Flips when there is not enough space. |
| sideOffset | number | 4 | Gap between trigger and panel. |
| alignOffset | number | 0 | Shift along the alignment axis. |
| portal | boolean | true | Render in a portal. Set false for inline previews. |
| chrome | "menu" | "plain" | "panel" | "menu" | menu keeps popover fill, shadow, and radius. plain drops those so the list can sit inside a host surface. panel is a bordered card for always-visible lists. |
| background | CSS color | - | Surface fill for any chrome mode. Sets --df-option-list-surface-bg. Prefer a token such as var(--card) or var(--popover). |
| foreground | CSS color | - | Surface text color for any chrome mode. Sets --df-option-list-surface-fg. Header label inherits this color. |
| borderColor | CSS color | - | Outer surface stroke only. Sets --df-option-list-surface-border-color. Does not change header, search, or footer rules; use dividerColor for those. |
| borderWidth | CSS length | - | Outer surface stroke width. Sets --df-option-list-surface-border-width. Prefer var(--border-width-hairline). |
| borderStyle | CSS border-style | - | Outer surface stroke style. Sets --df-option-list-surface-border-style. Default solid. |
| dividerColor | CSS color | - | Hairline rules on header, search, and footer. Sets --df-option-list-divider-color. Defaults to var(--border). |
| radius | CSS length | - | Surface corner radius for any chrome mode. Sets --df-option-list-surface-radius. Prefer a radius token such as var(--radius-xl). |
| dismissOnScroll | boolean | true | Close when the page scrolls. Scrolling inside the list stays open. Set false to keep the panel following the trigger (it can cover sticky chrome). |
| header | ReactNode | - | Panel header above the options. Prefer OptionListHeader for a label, description, and edge-to-edge bottom rule. Stacks the panel like search and footer. |
| search | boolean | false | Show a search field above the options. |
| searchPlaceholder | string | "Search" | Placeholder for the search field. |
| searchBackground | string | - | Search field fill. Prefer tokens such as var(--muted). Forwards to SearchInput background. Named separately because background themes the panel surface. |
| searchValue | string | - | Controlled search query. |
| defaultSearchValue | string | - | Uncontrolled initial search query. |
| onSearchChange | (value: string) => void | - | Called when the search query changes. |
| scrollable | boolean | - | Wrap options in the kit ScrollArea. Omit to default true when the panel has no submenu, and false when it contains a submenu. |
| scrollMaxHeight | string | number | - | Max height of the scrollable body before it scrolls. Omit for min(60vh, var(--df-menu-max-height)), or var(--df-menu-stacked-max-height) when header, search, or footer is present. When the panel opens, the selected option scrolls into the list scrollport while list order stays the same. |
| scrollThumbGap | number | - | Space on each side of the scrollbar thumb, in pixels. Omit to use --df-option-list-scroll-thumb-gap. |
| footer | ReactNode | - | Footer actions under the options (for example Reset). |
| className | string | - | Panel surface styles. |
Option row. Same API as OptionListItem. Forwards List Item presentation props (size, variant, slots, chrome). Selection state stays on Select. Open the List Item page for standalone rows and asChild links.
| Prop | Type | Default | Notes |
|---|---|---|---|
| value | string | - | Option value stored in Select state. |
| size | "sm" | "md" | "lg" | "md" | List Item density. Forwarded to List Item. Use sm for compact nested submenu rows. |
| variant | "accent" | "muted" | "accent" | List Item fill recipe. Forwarded to List Item. accent is the picker default; muted is for quiet nav-style rows. |
| disabled | boolean | - | Not selectable row. |
| readOnly | boolean | - | Presentational row. Forwarded to List Item. Not selectable and no hover chrome. Keeps resting and selected appearance. |
| leading | "checkbox" | "check" | ReactNode | false | - | Option List leading slot. Pass an icon or other node for row icons; works with layout stacked. Use "checkbox" for multi-select. Pair with SelectTrigger leadingIcon when the trigger should mirror the selected icon. |
| leadingFit | "icon" | "content" | "icon" | Forwarded to List Item. icon keeps the mark box. content sizes the track to Avatar and other non-icon nodes. See List Item leadingFit. |
| secondary | ReactNode | - | Supporting copy beside or under the label. |
| layout | "inline" | "stacked" | "columns" | "inline" | inline places secondary beside the label; stacked places it underneath; columns is leading, main, and trailing text with the main label horizontally centered in the row and height from content. With leading on stacked rows, the icon aligns to the title line. Select mirrors stacked layout in the trigger value. |
| trailing | ReactNode | - | End of row slot: badge counter, nested menu chevron, measure text, or both. When set, the selected check is hidden unless indicator is forced on. Submenu triggers pass the chevron here; List Item renders the trailing slot. |
| indicator | boolean | - | Selected check in single mode. Defaults off when leading is checkbox or trailing is set; otherwise on. |
| children | ReactNode | - | Primary label registered for SelectValue. Compose a kit Badge beside a text span to show a status pill in the list and trigger. |
| className | string | - | Additional row styles. |
| style | CSSProperties | - | Host style. Merged after List Item chrome CSS variables. |
| padding | string | - | Padding on all sides. Forwarded to List Item. Sets each --df-list-item-padding-* side. |
| paddingX | string | - | Horizontal padding. Forwarded to List Item. Overrides padding on those sides. |
| paddingY | string | - | Vertical padding. Forwarded to List Item. Overrides padding on those sides. |
| paddingTop | string | - | Top padding. Forwarded to List Item. Wins over paddingY and padding. |
| paddingRight | string | - | Right padding. Forwarded to List Item. Wins over paddingX and padding. |
| paddingBottom | string | - | Bottom padding. Forwarded to List Item. Wins over paddingY and padding. |
| paddingLeft | string | - | Left padding. Forwarded to List Item. Wins over paddingX and padding. |
| gap | string | - | Minimum space between leading, label, trailing, and indicator. Forwarded to List Item. |
| fontSize | string | - | Label type size. Forwarded to List Item. Prefer type tokens such as var(--df-text-11). |
| fontFamily | string | - | Label font family. Forwarded to List Item. |
| fontWeight | string | - | Label font weight. Forwarded to List Item. |
| radius | string | - | Corner radius of the row fill and stroke. Forwarded to List Item. |
| background | string | - | Resting fill. Forwarded to List Item. Root itemChrome supplies defaults; per-item props win. |
| foreground | string | - | Resting label color. Forwarded to List Item. |
| hoverBackground | string | - | Hover, highlight, and focus fill. Forwarded to List Item. |
| hoverForeground | string | - | Hover, highlight, and focus label color. Forwarded to List Item. |
| selectedBackground | string | - | Selected fill. Forwarded to List Item. |
| selectedForeground | string | - | Selected label color. Forwarded to List Item. |
| selectedHoverBackground | string | - | Selected row hover fill. Forwarded to List Item. |
| activeBackground | string | - | Pressed fill. Forwarded to List Item. |
| borderWidth | string | - | Stroke width. Forwarded to List Item. Prefer var(--border-width-hairline). Default 0. |
| borderColor | string | - | Stroke color. Forwarded to List Item. Prefer var(--border). |
| borderStyle | string | - | Stroke style such as solid or dashed. Forwarded to List Item. |
Use when composing a field outside SelectField.
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Label title content. |
| subtext | ReactNode | - | Secondary supporting line under the title. Same as Label subtext. |
| htmlFor | string | - | Associates the label with the SelectTrigger id. |
| required | boolean | - | Shows the required mark on the label. |
| help | ReactNode | - | Trailing help control after the label (typically SelectFieldHelp). |
| className | string | - | Additional classes on the Label root. |
Help control for SelectFieldHelp inside a Tooltip.
| Prop | Type | Default | Notes |
|---|---|---|---|
| label | string | "More information" | Accessible name for the help button. |
| className | string | - | Additional classes on the help button. |
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Supporting text below the control. Pass a string or any custom node. |
| color | string | - | Hint color. Prefer tokens such as var(--muted-foreground). Sets --df-select-hint. |
| id | string | - | Hint id. Pair with aria-describedby on SelectTrigger. |
| className | string | - | Additional classes on the hint. |
| style | CSSProperties | - | Inline styles on the hint. Can also set --df-select-hint for color. |
Groups related items. Alias of OptionListGroup.
| Prop | Type | Default | Notes |
|---|---|---|---|
| className | string | - | Additional styles on the group. |
| children | ReactNode | - | Grouped rows and labels. |
Group heading inside the panel. Alias of OptionListLabel (ListItemLabel menu variant).
| Prop | Type | Default | Notes |
|---|---|---|---|
| children | ReactNode | - | Heading copy. |
| className | string | - | Additional styles on the heading. |
Horizontal rule between sections. Alias of OptionListSeparator.
| Prop | Type | Default | Notes |
|---|---|---|---|
| inset | boolean | false | When true, inset the rule to match content padding. When false, span the full content width. |
| className | string | - | Additional styles on the rule. |
Optional scroll affordances for long lists. Aliases of the OptionList scroll buttons.
| Prop | Type | Default | Notes |
|---|---|---|---|
| className | string | - | Additional styles on the button. |
Common configurations that are not single named props. Use className and tokens. Radius (CSS / className): Trigger uses the kit radius token. Override with className such as rounded-xl or rounded-full utilities. Corner shape (theme token): Curve style for rounded chrome. Set once with df-ui init --corner-shape (round or smooth), or override --df-corner-shape on :root. Fixed width (width CSS length): Pass a CSS length on Select such as 12rem or 200px. Multi-select badges wrap to new lines and the trigger grows in height. Text truncation (width CSS length): A fixed width that is shorter than the label ellipsizes SelectValue. The open list matches the trigger by default for fill and fixed width. Hug menu content (alignItemWithTrigger={false}): Menu width follows the longest option. Default when root width is hug, or pass false to override fill and fixed. Match trigger width (alignItemWithTrigger): Lock the menu to the trigger width. Default when root width is fill or fixed. List Item props (ListItem): SelectItem is OptionListItem. size, variant, slots, and chrome props forward to List Item. Open the List Item page for the full contract and use outside Select.
The trigger is a combobox that owns open state and value display; the open list is an Option List panel. Open (Enter / Space / ArrowDown): Open the list from the focused trigger. Focus moves into the panel and lands on the selected option. Navigate (ArrowUp / ArrowDown / Home / End): Move the active option with wrap. Type to jump by label (typeahead) when the list has no search field. Commit and dismiss (Enter / Escape): Enter selects the active option. Escape closes the list and returns focus to the trigger. ARIA (combobox + listbox): The trigger sets aria-expanded, aria-haspopup="listbox", and aria-controls to the panel. Pair a label via SelectField or aria-describedby for hints. High contrast (forced-colors): Under forced-colors, the trigger keeps a border and selected or active rows use the system Highlight colors.
Theme defaults live on :root. Override these globally or on a local host.
| Token | Type | Default | Notes |
|---|---|---|---|
| --df-menu-min-width | CSS length | 9rem | Minimum open panel width. |
| --df-menu-max-height | CSS length | 24rem | Maximum panel height before scrolling. |
| --df-select-padding-top | CSS length | calc(2 * var(--spacing-unit)) | Top content padding. Set by padding, paddingY, or paddingTop. Inset label defaults to calc(3 * var(--spacing-unit)). |
| --df-select-padding-right | CSS length | var(--df-control-content-inset-inline) | Right content padding. Set by padding, paddingX, or paddingRight. Defaults to --df-control-content-inset-inline. Inset label defaults to calc(3.5 * var(--spacing-unit)). |
| --df-select-padding-bottom | CSS length | calc(2 * var(--spacing-unit)) | Bottom content padding. Set by padding, paddingY, or paddingBottom. Inset label defaults to calc(3 * var(--spacing-unit)). |
| --df-select-padding-left | CSS length | var(--df-control-content-inset-inline) | Left content padding. Set by padding, paddingX, or paddingLeft. Defaults to --df-control-content-inset-inline. Inset label defaults to calc(3.5 * var(--spacing-unit)). |
| --df-select-hint | CSS color | var(--muted-foreground) | Hint line color. Set by SelectField hintColor or SelectFieldHint color. |
| --df-select-label | CSS color | var(--foreground) | Owned label color. Set by SelectField labelColor. Overlap defaults to muted-foreground. |
| --df-select-error-label | CSS color | var(--destructive) | Owned label color when invalidLabel is active. Set by SelectField errorLabelColor. |
| --df-select-overlap-label-bg | CSS color | var(--background) | Notch fill for overlap labels. Set by SelectField overlapLabelBackground. |
| --df-select-overlap-inset | CSS length | var(--df-control-content-inset-inline) | Leading inset for the overlap label. Set by SelectField overlapInset. Defaults to --df-control-content-inset-inline. Outside Label content mode on the field tracks this value. |
| --df-select-overlap-label-pad | CSS length | calc(1 * var(--spacing-unit)) | Horizontal padding on the overlap label chip. Set by SelectField overlapLabelPadding. |
| --df-select-overlap-label-size | CSS length | var(--df-text-11) | Overlap label font size. Set by SelectField overlapLabelSize. |
| --df-select-inset-label-size | CSS length | var(--df-text-11) | Inset label font size. Set by SelectField insetLabelSize. |
| --df-select-inset-gap | CSS length | calc(0.5 * var(--spacing-unit)) | Gap between inset label and value. Set by SelectField insetGap. |
| --df-select-error-border | CSS color | var(--destructive) | Invalid trigger border. Set by SelectTrigger errorBorderColor. |
| --focus-ring-error | box-shadow | 0 0 0 3px color-mix(in oklch, var(--destructive) 20%, transparent) | Invalid focus ring recipe shared with Input. |
| --df-select-icon-size | CSS length | calc(4 * var(--spacing-unit)) | Leading icon box size on SelectTrigger. Scales with size. |
| --df-select-line-height | CSS length | var(--df-leading-5) | Value and placeholder leading. Paired with the size step as an even pixel value so single-line text centers without sub-pixel drift. |
| --df-select-bg | CSS color | var(--background) | Trigger fill. Set by variant or the background prop. |
| --df-select-border | CSS color | var(--input) | Trigger border. Set by variant or the borderColor prop. |
| --df-hover-border | CSS keyword | on | Theme field hover border. on paints the ink hover border; off keeps the resting border. Runtime gating uses data-df-hover-border on html. Set with df-ui init --hover-border. Default on. |
| --df-select-hover-border | CSS color | var(--foreground) | Hover border when the theme or instance enables hover. Defaults to the ink foreground. Override with hoverBorderColor. |
| --border | CSS color | var(--df-neutral-100) | Panel and shared border token. |
| --background | CSS color | var(--df-neutral-0) | Primary fill default. |
| --popover | CSS color | var(--df-neutral-0) | Open panel fill. |
| --popover-foreground | CSS color | var(--df-neutral-900) | Open panel text color. |
| --accent | CSS color | var(--df-neutral-50) | Hover and highlight row fill. |
| --accent-foreground | CSS color | var(--df-neutral-850, var(--df-neutral-900)) | Hover and highlight row text. |
| --df-corner-shape | CSS corner-shape | var(--df-corner-shape-round) | Theme corner curve for all kit chrome. round = circular arcs; smooth = continuous squircle. Set with df-ui init --corner-shape, or override on :root. Default round. |