FormComponentsSelect Field

Select Field

SelectField is a specialized reusable input component for Shaddy Form.

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

NameTypeDefaultDescription
namestring (from react-hook-form Path)requiredThe field name (must match your form schema).
labelstringThe label displayed above the select.
placeholderstringPlaceholder text for the select.
options{ value: string; text: string }[]requiredArray of options for the dropdown.
requiredbooleanfalseMarks the field as required.
classNamestringAdditional 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>;