Skip to main content
Version: Next 🚧

Quick start

Each block below is a complete, runnable component. Edit it, and copy it straight into your app when you're done.

Wheel​

Pass primitives or { label, value } objects.

Loading…
<WheelPicker
  items={['XS', 'S', 'M', 'L', 'XL', 'XXL']}
  value={size}
  onChange={setSize}
/>

Time​

The 12h / 24h format comes from the locale automatically.

Loading…
<TimePicker value={time} onChange={setTime} minuteInterval={5} />

Date (calendar)​

Loading…
<DatePicker value={date} onChange={setDate} minDate={new Date()} />

Date range​

Loading…
<>
  <DatePicker
    mode="range"
    value={range}
    onChange={setRange}
    minDate={new Date()}
  />
  <Text style={{ textAlign: 'center', color: '#6E685E' }}>
    {range.start ? formatDate(range.start) : '—'} →{' '}
    {range.end ? formatDate(range.end) : '—'}
  </Text>
</>

Date (wheel)​

Loading…
<DatePicker
  display="wheel"
  value={birthday}
  onChange={setBirthday}
  maxDate={new Date()}
/>

Select​

Tap the field to open a searchable bottom sheet.

Loading…
<SelectPicker
  label="Language"
  placeholder="Choose a language"
  options={languages}
  value={lang}
  onChange={setLang}
/>

Emoji​

Loading…
<>
  <Text style={{ fontSize: 28, minHeight: 40 }}>{text}</Text>
  <EmojiPicker
    height={320}
    onSelect={(emoji) => setText((t) => t + emoji)}
  />
</>

In a bottom sheet​

Every picker also ships as a sheet. The sheet keeps a draft and only calls onConfirm when the user taps Done; Cancel, a backdrop tap or a swipe down discards it.

Loading…
<>
  <Pressable
    onPress={() => setOpen(true)}
    style={{ backgroundColor: '#C8460D', padding: 14, borderRadius: 12 }}
  >
    <Text
      style={{ color: 'white', fontWeight: '600', textAlign: 'center' }}
    >
      {range.start && range.end
        ? `${formatDate(range.start)} → ${formatDate(range.end)}`
        : 'Pick dates'}
    </Text>
  </Pressable>
  <DatePickerSheet
    visible={open}
    onClose={() => setOpen(false)}
    title="Check-in / Check-out"
    mode="range"
    value={range}
    onConfirm={setRange}
    minDate={new Date()}
  />
</>

In a form field​

A field opens the sheet for you and shows the confirmed value, so there's no open state to manage. Each sheet has one: DatePickerField, TimePickerField, DateTimePickerField, WheelPickerField and EmojiPickerField.

Loading…
<View style={{ gap: 14 }}>
  <DatePickerField
    label="Date"
    placeholder="Pick a date"
    value={day}
    onConfirm={setDay}
    minDate={new Date()}
  />
  <TimePickerField
    label="Time"
    placeholder="Pick a time"
    value={time}
    onConfirm={setTime}
    minuteInterval={15}
  />
</View>

→ Picker fields

Pick a design​

Each picker looks native on its platform by default. Use the switch at the top left of any example to see iOS, Android and Web. To use one look on every platform, set design on the provider or on one component:

Loading…
<TimePicker
  design="material"
  value={time}
  onChange={setTime}
/>

→ Designs

Next​