shadcn.io is an independent project built on shadcn/ui
Status sits above the menu, which already shows Active. The list is Active, Pending, Suspended, and Inactive. Under the menu: Current account status.
Choose it when the field should be valid before anyone opens it. A short OS menu is a Native Select. On React, Ark UI does not update the account.
Installation
Anatomy
Usage
<Field className="max-w-md">
<FieldLabel>Status</FieldLabel>
<Select collection={collection} defaultValue={["active"]}>
<SelectTrigger className="w-full">
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectGroup>
{collection.items.map((item) => (
<SelectItem item={item} key={item.value}>
{item.label}
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
<FieldDescription>Current account status.</FieldDescription>
</Field>FAQ
How does Status open on Active?
The trigger shows the selected label, and this select has no placeholder. The items are Active, Pending, Suspended, and Inactive.
Set defaultValue to an array containing active.
Where is the helper text?
FieldDescription comes after the Select and reads Current account status. The label Status comes first.
How does the Status label connect?
FieldLabel names the select. Field connects the two for you, with no ids to write. The label text is Status.
Where do the four statuses go?
Active, Pending, Suspended, and Inactive are SelectItems. Opening the select shows that list, and the trigger keeps the selected label.
API Reference
Field
No extra props in this demo. The rest is on the Field page.
Select
Sets collection={collection}, defaultValue={["active"]} and item={item}. The rest is on the Select page.
