Select Menu Field

Related components

SelectMenuField wraps a SelectMenu with a Label and InlineMessage to provide consistent form behaviour and layout. It integrates with react-hook-form via the Form component.

<Form>
  <SelectMenuField name="fruit" label="Favourite fruit" placeholder="Pick a fruit" theme="white" className="w-80">
    <SelectMenu.Item value="apple">Apple</SelectMenu.Item>
    <SelectMenu.Item value="banana">Banana</SelectMenu.Item>
    <SelectMenu.Item value="cherry">Cherry</SelectMenu.Item>
  </SelectMenuField>
</Form>

With validation

<Form>
  <SelectMenuField
    name="fruit"
    label="Favourite fruit"
    placeholder="Pick a fruit"
    theme="white"
    validation={{ required: 'Please select a fruit' }}
    className="w-80"
  >
    <SelectMenu.Item value="apple">Apple</SelectMenu.Item>
    <SelectMenu.Item value="banana">Banana</SelectMenu.Item>
  </SelectMenuField>
</Form>

API Reference

SelectMenuField

Prop	Type	Default	Required
`appearance`	`"standard"` \| `"modern"`	-	-
`className`	`string`	-	-
`description`	`string`	-	-
`disabled`	`boolean`	-	-
`error`	`string`	-	-
`hideLabel`	`boolean`	-	-
`label`	`string`	-
`name`	`string`	-
`placeholder`	`string`	-	-
`prompt`	`{ link?: string \| undefined; label: string; onClick?: (() => void) \| undefined; }`	-	-
`required`	`boolean`	-	-
`size`	`"sm"` \| `"md"` \| `"lg"`	-	-
`theme`	`"white"` \| `"grey"`	-	-
`validation`	`ValidationOptions`	-	-