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.

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

  • size

    SizeTokens

    Set the size of itself and pass to all inner elements

  • 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

  • sheetBreakpoint

    MediaPropKeys | false

    Set this to a media breakpoint and Dialog will show as a Sheet, if given Dialog.Sheet

  • <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.

    <Sheet />

    When used alongside sheetBreakpoint, Select will render as a sheet when that breakpoint is active.

    See Sheet for more props.

    Must use Select.SheetContents inside the Select.Sheet.Frame to insert the contents given to Select.Content

    import { Select } from '@tamagui/select' // or from 'tamagui'
    export default () => (
    <Select defaultValue="">
    <Select.Trigger>
    <Select.Value placeholder="Search..." />
    </Select.Trigger>
    <Select.Sheet>
    <Select.Sheet.Frame>
    <Select.SheetContents />
    </Select.Sheet.Frame>
    <Select.Sheet.Overlay />
    </Select.Sheet>
    <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>
    )