Founding price: $35, then $79.99 after 23:59 UTC on 4 November, then $79.99
Get ProA select for touch screens: a button that shows the choice and opens a bottom sheet with large rows, optional search and single or multiple selection.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it for form fields with five or more options on a phone, where a native-looking dropdown is hard to tap: country, category, tags.
Do not use it for two to four options (use a radio group or segmented control) or for free text. On desktop widths, a normal select or combobox is better.
import { PickerSheet } from "@/components/ui/picker-sheet"<PickerSheet
title="Country"
searchable
options={[{ value: "br", label: "Brazil" }]}
value={country}
onValueChange={setCountry}
/>| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
PickerSheet | options | PickerOption[] | required | { value, label, description?, icon?, disabled? }. |
PickerSheet | value / onValueChange | string or string[] | - | Selected value(s). |
PickerSheet | multiple | boolean | false | Allow several; adds a Done button. |
PickerSheet | searchable | boolean | false | Add a search field and a taller sheet. |
PickerSheet | title / placeholder | string | title required | Sheet title and trigger text when empty. |
PickerSheet | labelledBy | string | - | Id of a visible label; the trigger is then named "label value". |
PickerSheet | aria-label | string | - | Name when there is no visible label; the value is appended. |
labelledBy with a label element that has an id and no for, otherwise the native label replaces the value in the name. The trigger shows the current value and is named with it ("Language, English" through labelledBy or aria-label); options are at least 48px tall.The component ships with a Testing Library test (picker-sheet.test.tsx). jsdom has no touch or layout, so the test drives the component through its keyboard and pointer-free paths and checks roles, names and state.