Core
Tamagui
Extras
Guides
Community
Show a menu of items users can select from one of.
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.
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>)
Contains every component for the select:
string
Optional for usage with Label
React.ReactNode
Select children API components
string
Controlled value
string
Default value
(value: string) => void
Callback on value change
boolean
Controlled open value
boolean
Default open value
(open: boolean) => void
Callback on open change
Direction
Direction of text display
string
For use in forms
SizeTokens
Set the size of itself and pass to all inner elements
Extends ListItem to give sizing, icons, and more.
Extends Paragraph, adding:
string
Optional placeholder to show when no value selected
Main container for Select content, used to contain the up/down arrows, no API beyond children.
Inside Content first, displays when you can scroll up, stuck to the top.
Extends YStack.
Inside Content last, displays when you can scroll down, stuck to the bottom.
Extends YStack.
Extends ThemeableStack. Contains scrollable content items as children.
Extends YStack. Use only when grouping together items, alongside a Label as the first child.
Extends ListItem. Used to label Groups.
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.
number
Incrementally starting from 0, matching its appearance in the list.
string
Provide a value that will be passed on selection.
Extends Paragraph. Used inside Item to provide unselectable text that will show above once selected in the parent Select.