Homepage
IntroductionInstallationConfigurationThemesPropsBenchmarksReleases

Core

styledVariantsAnimationsStack & TextThemeuseMediauseTheme

Tamagui

StacksHeadingsParagraph

Forms

ButtonInput + TextareaLabelProgressSelectSliderSwitch

Panels

DialogPopoverTooltip

Content

AvatarCardGroupImageListItem

Visual

LinearGradientSeparatorSquare + Circle

Etc

AnchorHTML ElementsSpinnerUnspacedVisuallyHidden

Extras

DrawerFeather Icons

Guides

Design SystemsDevelopingNext.jsExpocreate-tamagui-app

Community

BlogGitHub
Twitter
Discord
Beta
Github

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.

    Previous

    Progress

    Next

    Slider

    Edit this page on GitHub.