Select | Zalify UI

Framework

React

Usage

import { Select } from '@zalify-ui/react'

<Select.Root>
  <Select.HiddenSelect />
  <Select.Label />
  <Select.Control>
    <Select.Trigger>
      <Select.ValueText />
    </Select.Trigger>
    <Select.IndicatorGroup>
      <Select.Indicator />
      <Select.ClearTrigger />
    </Select.IndicatorGroup>
  </Select.Control>
  <Select.Positioner>
    <Select.Content>
      <Select.Item />
      <Select.ItemGroup>
        <Select.ItemGroupLabel />
        <Select.Item />
      </Select.ItemGroup>
    </Select.Content>
  </Select.Positioner>
</Select.Root>

Examples

Size

Use the size prop to change the size of the select component.

Label

React

Option Group

Use the Select.ItemGroup component to group select options.

Favorite Movie

React

Props

Root

Prop	Default	Type
`collection`*		`ListCollection<T>` The collection of items
`variant`	`'outline'`	`'outline' \| 'surface'`
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`
`closeOnSelect`	`true`	`boolean` Whether the select should close after an item is selected
`composite`	`true`	`boolean` Whether the select is a composed with other composite widgets like tabs or combobox
`lazyMount`	`false`	`boolean` Whether to enable lazy mounting
`loopFocus`	`false`	`boolean` Whether to loop the keyboard navigation through the options
`skipAnimationOnMount`	`false`	`boolean` Whether to allow the initial presence animation.
`unmountOnExit`	`false`	`boolean` Whether to unmount on exit.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`defaultHighlightedValue`		`string` The initial value of the highlighted item when opened. Use when you don't need to control the highlighted value of the select.
`defaultOpen`		`boolean` Whether the select's open state is controlled by the user
`defaultValue`		`string[]` The initial default value of the select when rendered. Use when you don't need to control the value of the select.
`deselectable`		`boolean` Whether the value can be cleared by clicking the selected item. Note: this is only applicable for single selection
`disabled`		`boolean` Whether the select is disabled
`form`		`string` The associate form of the underlying select.
`highlightedValue`		`string` The controlled key of the highlighted item
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string content: string control: string trigger: string clearTrigger: string label: string hiddenSelect: string positioner: string item: (id: string \| number) => string itemGroup: (id: string \| number) => string itemGroupLabel: (id: string \| number) => string }>` The ids of the elements in the select. Useful for composition.
`immediate`		`boolean` Whether to synchronize the present change immediately or defer it to the next frame
`invalid`		`boolean` Whether the select is invalid
`multiple`		`boolean` Whether to allow multiple selection
`name`		`string` The `name` attribute of the underlying select.
`onExitComplete`		`VoidFunction` Function called when the animation ends in the closed state
`onFocusOutside`		`(event: FocusOutsideEvent) => void` Function called when the focus is moved outside the component
`onHighlightChange`		`(details: HighlightChangeDetails<T>) => void` The callback fired when the highlighted item changes.
`onInteractOutside`		`(event: InteractOutsideEvent) => void` Function called when an interaction happens outside the component
`onOpenChange`		`(details: OpenChangeDetails) => void` Function called when the popup is opened
`onPointerDownOutside`		`(event: PointerDownOutsideEvent) => void` Function called when the pointer is pressed down outside the component
`onSelect`		`(details: SelectionDetails) => void` Function called when an item is selected
`onValueChange`		`(details: ValueChangeDetails<T>) => void` The callback fired when the selected item changes.
`open`		`boolean` Whether the select menu is open
`positioning`		`PositioningOptions` The positioning options of the menu.
`present`		`boolean` Whether the node is present (controlled by the user)
`readOnly`		`boolean` Whether the select is read-only
`required`		`boolean` Whether the select is required
`scrollToIndexFn`		`(details: ScrollToIndexDetails) => void` Function to scroll to a specific index
`value`		`string[]` The controlled keys of the selected items

Item

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`item`		`any` The item to render
`persistFocus`		`boolean` Whether hovering outside should clear the highlighted state

ValueText

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`placeholder`		`string` Text to display when no value is selected.