# Forms


Give it a `name` and it submits with the form, responds to `form.reset()`, and
participates in native validation.

<ComponentPreview name="color-input-form-demo" />

```tsx
<form onSubmit={handleSubmit}>
  <ColorInput name="brand" defaultValue="#cc3366" required />
  <button type="submit">Save</button>
</form>
```

The submitted value is the string in whichever `format` you set, so a form that
needs `rgba()` gets it without a conversion step on your side.

## Validation

`required` marks the control invalid while it is empty. `validationBehavior`
chooses between the browser's own bubble and an ARIA-only message:

```tsx
<ColorInput name="brand" required validationBehavior="aria" />
```

## Resetting

`form.reset()` returns the control to `defaultValue`, like any native input. A
controlled `ColorInput` is yours to reset — the form cannot change state you own.

## API reference

### Props

<PropsTable name="ColorInput" />