# Native select: Field

> Inside a `<Field />`, the label and description connect on their own and errors show as the value changes. Submit without a plan and the select turns red, shakes once, and the browser points to it.

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

## Add this example

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

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

## Source

```tsx title="components/examples/native-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 { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

export function NativeSelectField() {
  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={(event) => event.preventDefault()}
    >
      <Field validationMode="onChange">
        <FieldLabel>Plan</FieldLabel>
        <NativeSelect name="plan" required className="w-full">
          <NativeSelectOption value="">Choose a plan</NativeSelectOption>
          <NativeSelectOption value="hobby">Hobby</NativeSelectOption>
          <NativeSelectOption value="pro">Pro</NativeSelectOption>
          <NativeSelectOption value="team">Team</NativeSelectOption>
        </NativeSelect>
        <FieldDescription>You can change this later.</FieldDescription>
        <FieldError match="valueMissing">Choose a plan to continue.</FieldError>
      </Field>
      <Button type="submit" className="self-start">
        Continue
      </Button>
    </Form>
  )
}
```

## Props in this example

### NativeSelect

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string` | – | Applied to the wrapper, so it sizes the whole control. |
| `required` | `boolean` | `false` |  |

## More Native select examples

- [Groups](https://hextaui.com/docs/native-select/examples/groups.md)
- [Sizes](https://hextaui.com/docs/native-select/examples/sizes.md)
- [Invalid](https://hextaui.com/docs/native-select/examples/invalid.md)
- [Disabled](https://hextaui.com/docs/native-select/examples/disabled.md)
- [Controlled](https://hextaui.com/docs/native-select/examples/controlled.md)
- [Long content](https://hextaui.com/docs/native-select/examples/long-content.md)
- [Right to left](https://hextaui.com/docs/native-select/examples/rtl.md)