Select

Setup

import { Select } from '@fragments-sdk/ui';

Examples

Loading preview...

Props

Prop	Type	Default	Description
`children`	`node`	Not set	Select trigger and content
`value`	`string`	Not set	Controlled selected value
`defaultValue`	`string`	Not set	Default selected value (uncontrolled)
`onValueChange`	`function`	Not set	Called when selection changes
`onChange`	`function`	Not set	Alias for onValueChange
`open`	`boolean`	Not set	Controlled open state of the dropdown
`defaultOpen`	`boolean`	`false`	Initial open state for uncontrolled usage
`onOpenChange`	`function`	Not set	Called when dropdown open state changes
`required`	`boolean`	Not set	Whether a selection is required
`name`	`string`	Not set	Form field name
`placeholder`	`string`	Not set	Placeholder text when no value selected
`options`	`array`	Not set	Convenience options array for simple selects (alternative to compound Select.Item children)
`size`	`enumsmmdlg`	`md`	Size variant
`className`	`string`	Not set	Wrapper class name
`label`	`string`	Not set	Visible label text above the select
`helperText`	`string`	Not set	Helper text shown below the select
`error`	`union`	Not set	Show error styling. When a string is provided, it is displayed as an error message.
`disabled`	`boolean`	`false`	Disable the select

Usage Guidelines

When to use

Choosing from a predefined list of options
More than 4-5 options that would clutter UI as radio buttons
Space-constrained forms
When users need to see all options at once

When not to use

Very few options (2-3) - use radio buttons
Users might type custom values - use Combobox
Multiple selections needed - use Checkbox group or MultiSelect
Actions, not selection - use Menu

Best practices

Include a placeholder that explains what to select
Use label prop for accessible field labeling
Use helperText for guidance and error for validation messages
Group related options with SelectGroup
Keep option text concise
Order options logically (alphabetical, by frequency, or by category)

Accessibility

Full keyboard navigation support
Type-ahead search within options
Proper ARIA roles and attributes

Menualternative

Use Menu for action-based dropdowns

Inputsibling

Use Input for free-form text entry

Checkboxalternative

Use Checkbox group for multiple selections

Setup

Examples

Default

With Groups

With Label and Helper Text

Error State

With Disabled Options

Scrollable List

Custom Max Visible Items

Disabled

Options Prop

Props

Usage Guidelines

When to use

When not to use

Best practices

Setup

Examples

Default

With Groups

With Label and Helper Text

Error State

With Disabled Options

Scrollable List

Custom Max Visible Items

Disabled

Options Prop

Props

Usage Guidelines

When to use

When not to use

Best practices

Related Components