Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Single selection
  • Controlled multiple selection
  • Small select
  • Large select
  • Managed select
  • Read-only select
  • Required workspace
  • Recommendations
  • Usage boundaries
  • API reference

Forms

Select

Chooses a value from a compact anchored list.

idle

Usage

import {
	Select,
	SelectItem,
	SelectLabel,
	SelectPopup,
	SelectTrigger,
	SelectValue,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Select>
	<SelectLabel />
	<SelectTrigger>
		<SelectValue />
	</SelectTrigger>
	<SelectPopup>
		<SelectItem />
	</SelectPopup>
</Select>

Examples

Single selection

Supply items so the trigger can resolve the selected label before the popup opens.

Controlled multiple selection

Use an array value with multiple. Selecting an option toggles its membership.

Small select

Use this size to match the density of the surrounding interface.

Large select

Use this size to match the density of the surrounding interface.

Managed select

Disabled controls cannot be edited or focused.

Read-only select

Read-only controls allow selection and copying without edits.

Required workspace

Use an invalid state with a nearby explanation of the error.

Recommendations

GuidancePractice
Do

Label the field and use readable option names. Provide explicit labels when values are objects.

Do

SelectLabel names the trigger. Enter or Space opens the popup; arrow keys move through options and typing finds matching labels. Escape dismisses it.

Do

Uncontrolled composition with serializable items can live in a Server Component. Controlled values, callbacks, and object formatting functions belong in a Client Component.

Usage boundaries

GuidanceBoundary
Scope

Use Combobox for text filtering. Multiple selection needs visible selected values and a clear way to change them.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
valueMultiple extends true ? Value[] : Value | null—Controls the selected value or values.
defaultValueMultiple extends true ? Value[] : Value | null—Sets initial selection.
onValueChange(value: Multiple extends true ? Value[] : Value | null, eventDetails) => void—Receives selection changes.
multiplebooleanfalseEnables selecting more than one item.
formstring—Associates the hidden input with a form by id, including when the Select is portaled.
SelectTriggerSelectTriggerProps—Names and opens the select; supports size and invalid state.
SelectValueSelectValueProps—Displays the selected item or a placeholder.
SelectPopupSelectPopupProps—Positions the list and can set its portal container.
SelectItemSelectItemProps—Declares a selectable value.
SelectGroupSelectGroupProps—Groups related items.
PreviousRadio groupNextSlider
Workspace
Notification channels
Required workspace