---
title: "Form Fields"
description: "Inputs, textareas, selects, labels, helper text, switches and checkboxes styled for the newt/ui dark theme."
---

Inputs, textareas, selects, labels, helper text, switches and checkboxes styled for the newt/ui dark theme. Compose it from the exported registry parts so local content and behaviour stay in the application while the visual contract stays token-driven.

_Live example of Form Fields — see the page for the rendered demo._

## Installation

```bash
npx newtui@latest add form-fields
```

Files written — React: components/ui/form-fields.tsx. Vue: components/ui/form-fields/Field.vue, components/ui/form-fields/Label.vue, components/ui/form-fields/Input.vue, components/ui/form-fields/Textarea.vue, components/ui/form-fields/Select.vue, components/ui/form-fields/FieldHelp.vue, components/ui/form-fields/Switch.vue, components/ui/form-fields/Checkbox.vue, components/ui/form-fields/index.ts.

## Usage

React:

```tsx
import { FormFields } from "@/components/ui/form-fields"
```

Vue:

```ts
import { Field, Label, Input, Textarea, Select, FieldHelp, Switch, Checkbox } from "@/components/ui/form-fields"
```

## API reference

**`Field`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `invalid` | `boolean \| undefined` | — | Marks the whole field as failing validation. The controls inside it read `data-invalid` from this wrapper, so one prop restyles the group rather than each control being told separately. |

**`FieldHelp`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `variant` | `"help" \| "error" \| undefined` | — | `error` colours the text and announces it: a validation message that appears after a submit is useless to a reader who never sees it. |

**`Switch`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean \| undefined` | — | Optional checked value. |
| `defaultChecked` | `boolean \| undefined` | — | Optional defaultChecked value. |
| `onCheckedChange` | `(checked: boolean) => void \| undefined` | — | Optional onCheckedChange value. |

**`Checkbox`**

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `checked` | `boolean \| undefined` | — | Optional checked value. |
| `defaultChecked` | `boolean \| undefined` | — | Optional defaultChecked value. |
| `onCheckedChange` | `(checked: boolean) => void \| undefined` | — | Optional onCheckedChange value. |

The registry exports `Field`, `Label`, `Input`, `Textarea`, `Select`, `FieldHelp`, `Switch`, `Checkbox`. Parts without a table accept the native attributes for the element they render; React uses `className`, while Vue uses `class` and fallthrough attributes.

## Accessibility

Associate every control with a visible label. Connect help or error text with `aria-describedby`, and pair invalid styling with `aria-invalid` rather than colour alone.

## Tokens

Form Fields reads its colours, radii and motion from the `--newt-*` tokens. Override a token rather than editing the component.