# Select: In a form

> Inside `Field`, the trigger gets its label, description and required validation.

Example: https://hextaui.com/docs/select/examples/field
Component docs: https://hextaui.com/docs/select.md

## Add this example

```bash
npx shadcn@latest add https://hextaui.com/r/select-field.json
```

This adds `components/examples/select/field.tsx` with the Select component and the HextaUI theme tokens.

## Source

```tsx title="components/examples/select/field.tsx"
"use client"

import { Form } from "@base-ui/react/form"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

const roles = [
  { value: "viewer", label: "Viewer" },
  { value: "editor", label: "Editor" },
  { value: "admin", label: "Admin" },
]

export function SelectField() {
  return (
    <Form
      className="flex w-full max-w-xs flex-col items-start gap-4"
      onSubmit={(event) => event.preventDefault()}
    >
      <Field name="role">
        <FieldLabel>Role</FieldLabel>
        <Select items={roles} required>
          <SelectTrigger className="w-full">
            <SelectValue placeholder="Choose a role" />
          </SelectTrigger>
          <SelectContent>
            {roles.map((role) => (
              <SelectItem key={role.value} value={role.value}>
                {role.label}
              </SelectItem>
            ))}
          </SelectContent>
        </Select>
        <FieldDescription>Admins can invite people.</FieldDescription>
        <FieldError match="valueMissing">Choose a role to continue.</FieldError>
      </Field>
      <Button type="submit" size="sm">
        Invite
      </Button>
    </Form>
  )
}
```

## Props in this example

### Select

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` | `Record<string, ReactNode> \| { value, label }[]` | – | Lets SelectValue show labels. |
| `required` | `boolean` | `false` |  |

### SelectValue

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `placeholder` | `ReactNode` | – |  |

### SelectItem

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `Value` | – |  |

## More Select examples

- [Sizes](https://hextaui.com/docs/select/examples/sizes.md)
- [Groups and long lists](https://hextaui.com/docs/select/examples/groups.md)
- [With icons](https://hextaui.com/docs/select/examples/icons.md)
- [Multiple](https://hextaui.com/docs/select/examples/multiple.md)
- [Disabled and invalid](https://hextaui.com/docs/select/examples/states.md)
- [Below the trigger](https://hextaui.com/docs/select/examples/dropdown.md)
- [Right to left](https://hextaui.com/docs/select/examples/rtl.md)