āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/wandrydev/wandry-ui/components/select-field ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<CodeBlockCommand __pnpm__="pnpm dlx shadcn@latest add @wandry-ui/select-field" __npm__="npx shadcn@latest add @wandry-ui/select-field" __bun__="bunx --bun shadcn@latest add @wandry-ui/select-field" __yarn__="yarn dlx shadcn@latest add @wandry-ui/select-field" />
<ComponentPreview src="/registry/examples/select-field-demo.tsx" name="select-field-demo" description="A component for Wandry UI" align="center" />
import SelectField from "@/components/select-field";
<SelectField
name="last_name"
label="Last Name"
placeholder="Select your last name"
options={{
"Last Names A-M": [
{ value: "anderson", label: "Anderson" },
{ value: "brown", label: "Brown" },
{ value: "martin", label: "Martin" },
],
"Last Names N-Z": [
{ value: "nguyen", label: "Nguyen" },
{ value: "roberts", label: "Roberts" },
{ value: "wilson", label: "Wilson" },
],
}}
/>
<AutoTypeTable path="registry/wandry-ui/select-field.tsx" name="SelectFieldProps" />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā