Select

Show a menu of items users can select from one of.

Features

  • Comes with styling, yet completely customizable and themable.

  • Accepts animations, themes, size props and more.

  • Accessible, keyboard navigable, full-featured.

Notice: Select is in beta for Web only, on Native it will adapt to appear in a Drawer as a RadioList, we are re-implementing a simple Drawer to support this pattern.

Anatomy

import { Select } from '@tamagui/select' // or from 'tamagui'
export default () => (
<Select defaultValue="">
<Select.Trigger>
<Select.Value placeholder="Search..." />
</Select.Trigger>
<Select.Content>
<Select.ScrollUpButton />
<Select.ViewPort>
<Select.Group>
<Select.Label />
<Select.Item>
<Select.ItemText />
</Select.Item>
</Select.Group>
</Select.ViewPort>
<Select.ScrollDownButton />
</Select.Content>
</Select>
)

API

<Select />

Contains every component for the select:

Props

  • id

    string

    Optional for usage with Label

  • children

    React.ReactNode

    Select children API components

  • value

    string

    Controlled value

  • defaultValue

    string

    Default value

  • onValueChange

    (value: string) => void

    Callback on value change

  • open

    boolean

    Controlled open value

  • defaultOpen

    boolean

    Default open value

  • onOpenChange

    (open: boolean) => void

    Callback on open change

  • dir

    Direction

    Direction of text display

  • name

    string

    For use in forms

  • size

    SizeTokens

    Set the size of itself and pass to all inner elements

  • <Trigger />

    Extends ListItem to give sizing, icons, and more.

    <Value />

    Extends Paragraph, adding:

    Props

  • placeholder

    string

    Optional placeholder to show when no value selected

  • <Content />

    Main container for Select content, used to contain the up/down arrows, no API beyond children.

    <ScrollUpButton />

    Inside Content first, displays when you can scroll up, stuck to the top.

    Extends YStack.

    <ScrollDownButton />

    Inside Content last, displays when you can scroll down, stuck to the bottom.

    Extends YStack.

    <Viewport />

    Extends ThemeableStack. Contains scrollable content items as children.

    <Group />

    Extends YStack. Use only when grouping together items, alongside a Label as the first child.

    <Label />

    Extends ListItem. Used to label Groups.

    <Item />

    Extends ListItem. Used to add selectable values ot the list. Must provide an index as React Native doesn't give any escape hatch for us to configure that automatically.

    Props

  • index (required)

    number

    Incrementally starting from 0, matching its appearance in the list.

  • value

    string

    Provide a value that will be passed on selection.

  • <ItemText />

    Extends Paragraph. Used inside Item to provide unselectable text that will show above once selected in the parent Select.