Select Field
SelectField is a specialized reusable input component for Shaddy Form.
⚠️ This content is not available in your language yet.
SelectField is a reusable select/dropdown component for Shaddy Form. It supports labels, required state, custom placeholder, and dynamic options. Use it inside a Shaddy Form to collect single-choice user input with validation.
Installation
pnpm dlx shadcn@latest add https://shaddy-docs.vercel.app/r/select-field
Props
| Name | Type | Default | Description |
|---|---|---|---|
name | string (from react-hook-form Path) | required | The field name (must match your form schema). |
label | string | The label displayed above the select. | |
placeholder | string | Placeholder text for the select. | |
options | { value: string; text: string }[] | required | Array of options for the dropdown. |
required | boolean | false | Marks the field as required. |
className | string | Additional CSS classes for the field container. |
Usage
const PublishedOptions = [
{ value: "draft", text: "Draft" },
{ value: "published", text: "Published" },
{ value: "archived", text: "Archived" },
];
<ShaddyForm>
<SelectField
name="publishedStatus"
label="Published Status"
options={PublishedOptions}
placeholder="Select status"
required
/>
</ShaddyForm>;
