āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā ā š shadcn/directory/wandrydev/wandry-ui/components/choisebox-field ā āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
<CodeBlockCommand __pnpm__="pnpm dlx shadcn@latest add @wandry-ui/choisebox-field" __npm__="npx shadcn@latest add @wandry-ui/choisebox-field" __bun__="bunx --bun shadcn@latest add @wandry-ui/choisebox-field" __yarn__="yarn dlx shadcn@latest add @wandry-ui/choisebox-field" />
<ComponentPreview src="/registry/examples/choisebox-field-demo.tsx" name="choisebox-field-demo" description="A component for Wandry UI" align="center" />
import ChoiseboxField from "@/components/choisebox-field";
<ChoiseboxField
name="compute-environment"
label="Compute Environment"
description="Select the compute environment for your cluster."
options={[
{
label: "Environment A",
description: "This is the description for Environment A.",
value: "env-a",
},
{
label: "Environment B",
description: "This is the description for Environment B.",
value: "env-b",
},
{
label: "Environment C",
description: "This is the description for Environment C.",
value: "env-c",
},
]}
defaultValue="env-b"
/>
<AutoTypeTable path="registry/wandry-ui/choisebox-field.tsx" name="ChoiseboxFieldProps" />
ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā ā
āāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāāā