Select

Field control for single or multi choice: label, hint, sizes, disabled, and value display.

Installation

Add this item from the registry, or import it from the package after installing Default File UI.

Registry path

itsvigneshv/default-file-ui/select

Package import

import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, SelectField, SelectFieldLabel, SelectFieldHint, SelectFieldHelp, SelectValueSummary, SelectValueBadge } from "@default-file/ui/components/df-select"

Default

Pre-select state: placeholder in the trigger until a value is chosen.

Label and hint

Each piece is optional: toggle label, required mark, help, and hint independently.

Team member

This is a hint text to help user.

LabelRequired markHelpHint

Disabled

Non-interactive field. With outside label and hint, or trigger only.

Team member

This field is currently unavailable.

Fixed width

Constrain the trigger width; the selected label truncates. The open list still sizes to its options.

Sizes

Small, medium, and large trigger heights.

Multi-select summary

Selected state as plain text: count plus supporting detail (for example user totals).

Multi-select badges

Selected people as high-contrast removable badges. Fixed width wraps chips onto new lines; the menu matches the field width.

Left anchor

Menu left edge lines up with the trigger. Use when the list is wider than the control.

Centre anchor

Menu is centered on the trigger.

Right anchor

Menu right edge lines up with the trigger.

Content-aware

Picks left, centre, or right, and flips above or below, based on available space.

Properties

Select composes Option List for the open panel. Configure the root, field chrome, trigger, value display, content, and items below.

Select

Root state for single or multi choice, open state, and disabled.

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.
disabled	boolean	false	Non-interactive field; keeps the menu closed.

SelectField

Optional outside label and hint. Omit any prop to hide that piece.

Prop	Type	Default	Notes
label	ReactNode	—	Label above the control. Omit to hide the label row.
required	boolean	—	Shows the required mark on the label.
help	ReactNode	—	Help control after the label (for example SelectFieldHelp inside a Tooltip).
hint	ReactNode	—	Supporting text below the control. Omit to hide.
htmlFor	string	—	Associates the label with the trigger id.
hintId	string	—	Id for the hint; pair with aria-describedby on the trigger.
className	string	—	Layout width and spacing for the field shell.

SelectTrigger

Combobox host for the visible control. Sizes, width, radius, and truncation are configured here.

Prop	Type	Default	Notes
size	"sm" \| "md" \| "lg" \| "default"	"md"	T-shirt height and type size. "default" is an alias for "md".
disabled	boolean	—	Overrides Select disabled when set on the trigger.
className	string	—	Width and shape. Examples: w-64 (fixed width), w-36 (truncate), rounded-xl / rounded-full (radius override). 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.

SelectValue

Shows the placeholder, selected label, or a custom render (summary / badges).

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, and toggleValue.
className	string	—	Value text styles. Truncation follows a fixed-width trigger.

SelectValueSummary & SelectValueBadge

Multi-select value displays used inside SelectValue.

Prop	Type	Default	Notes
SelectValueSummary.count	number	—	Primary count text, for example “2 selected”.
SelectValueSummary.supportingText	ReactNode	—	Muted secondary detail, for example “16 users”.
SelectValueBadge.value	string	—	Selected option value; remove toggles this value off.
SelectValueBadge.children	ReactNode	—	Badge label. Defaults to the registered option label.
SelectValueBadge.onRemove	(value: string) => void	—	Optional custom remove handler instead of toggleValue.

SelectContent

Open Option List panel. Same API as OptionListContent.

Prop	Type	Default	Notes
align	"start" \| "center" \| "end" \| "auto"	"start"	Horizontal anchor relative to the trigger. auto picks the best fit.
alignItemWithTrigger	boolean	false	When true, menu width matches the trigger. When false, the menu hugs option content (and stays at least as wide as the trigger).
side	"top" \| "bottom" \| "left" \| "right"	"bottom"	Preferred placement side.
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.
search	boolean	false	Show a search field above the options.
searchPlaceholder	string	"Search"	Placeholder for the search field.
searchValue	string	—	Controlled search query.
defaultSearchValue	string	—	Uncontrolled initial search query.
onSearchChange	(value: string) => void	—	Called when the search query changes.
scrollable	boolean	false	Wrap options in a scroll area.
scrollMaxHeight	string \| number	"16rem"	Max height of the scrollable body.
footer	ReactNode	—	Footer actions under the options (for example Reset).
className	string	—	Panel surface styles.

SelectItem

Option row. Same API as OptionListItem, including trailing badges and nested chevrons.

Prop	Type	Default	Notes
value	string	—	Option value stored in Select state.
disabled	boolean	—	Non-selectable row.
leading	"checkbox" \| "check" \| ReactNode \| false	—	Leading control. Use "checkbox" for multi-select rows.
secondary	ReactNode	—	Supporting copy beside or under the label.
layout	"inline" \| "stacked"	"inline"	inline places secondary beside the label; stacked places it underneath.
trailing	ReactNode	—	End-of-row slot: badge counter, nested-menu chevron, or both. When set, the selected check is hidden unless indicator is forced on.
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.
className	string	—	Additional row styles.
…div attributes	HTMLAttributes	—	Native div props. Use data-highlighted for hover/open parent rows in nested menus.

Layout & appearance

Common configurations that are not single named props — use className and tokens.

Prop	Type	Default	Notes
Radius	CSS / className	--radius-4xl	Trigger uses the kit radius token. Override with className such as rounded-xl or rounded-full.
Fixed width	className on SelectTrigger	—	Set an explicit width (for example w-64). Multi-select badges wrap to new lines and the trigger grows in height.
Text truncation	className on SelectTrigger	—	Constrain width (for example w-36). SelectValue ellipsizes the selected label; the open list still hugs options unless alignItemWithTrigger is true.
Hug content	alignItemWithTrigger={false}	false	Default menu sizing: width follows the longest option (nowrap rows).
Match trigger width	alignItemWithTrigger	—	Lock the menu to the trigger width. Useful for fixed-width multi-select fields.
Composition	parts	—	Also available: SelectGroup, SelectLabel, SelectSeparator, SelectScrollUpButton, SelectScrollDownButton, SelectFieldLabel, SelectFieldHint, SelectFieldHelp.