---
title: "Form fields"
description: "Labelled fields with descriptions, errors and widths: TextField, EmailField, PhoneField, PasswordField and seven more."
requested_language: ar
language: en
translation_notice: "This page isn't translated yet"
url: https://docs.systhema.app/ar/components/form-fields
version: unreleased (main)
docs_index: https://docs.systhema.app/ar/llms.txt
---
> This page isn't translated yet. Showing English.
A field component renders a whole form row in one element: a [`FormGroup`](https://docs.systhema.app/ar/components/form.md#formgroup) with a label, an optional description, the control and an error message, with the ARIA attributes between them already wired. There is one field per control type. Start with these; drop to the [primitives](https://docs.systhema.app/ar/components/form-controls.md) only for layouts they don't cover.
```tsx preview title="Fields"
import { EmailField, Form, PasswordField, TextField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
## Import
```tsx
import { EmailField, TextField } from '@systhemaui/next'
```
In a React app without Next.js, import them from `@systhemaui/react`.
## Shared props
Every field takes these props on top of its control's own attributes:
| Prop | What it does |
| --------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
| `name` | Required. Also the default `id`, which the label's `htmlFor` points at |
| `label` | The label. Any React node on the single-control fields; a string on `RadioField` and `CheckboxField` |
| `description` | Help text in a `FormDescription` |
| `descriptionPosition` | `'top'` (default) puts the description between label and control, `'bottom'` below the control |
| `invalidMessage` | The error text, in a `FormInvalidMessage` |
| `width` | A CSS percentage that sizes the field inside a `FormRow` from `md` up (see [Widths](https://docs.systhema.app/ar/components/form.md#widths)) |
| `slotProps` | Props for the surrounding elements: `group`, `label`, `description`, `invalidMessage` (and `inputGroup` on the group fields) |
Everything else (`required`, `placeholder`, `defaultValue`, `onChange`, `className`, …) goes to the control itself.
## Examples
### Description position
```tsx preview title="Description above and below"
import { FormRow, TextField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### Showing an error
The error message stays hidden until the browser marks the control `:user-invalid`, which happens once the visitor has changed the value or tried to submit the form. So with native validation (`required`, `pattern`, `minLength`, the input type), pass `invalidMessage` up front and the message appears at the right moment. Type something that isn't an email address below and leave the field:
```tsx preview title="Native validation"
import { EmailField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
When you validate in JavaScript (or on the server), add the `is-invalid` class to the control: it forces the invalid style and shows the message immediately.
```tsx preview title="Server-side error"
import { TextField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
> [!NOTE]
> A field sets `aria-invalid="true"` on its control whenever `invalidMessage` is passed, even while the message is still hidden. For an accurate screen-reader state, pass `invalidMessage` only while the value is invalid.
### Widths
```tsx preview title="Widths in a row"
import { EmailField, FormRow, PhoneField, TextField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### Slot props
`slotProps` reaches the elements around the control without dropping to primitives, for example to give the group an id or restyle the description. The control's own props stay at the top level:
```tsx
;
```
## Fields
### `TextField`
A text input. `type` defaults to `'text'`; override it for other text-like inputs such as `url` or `search`. For email, phone, number, date and password, use the dedicated field, which sets the right `inputMode` and `autoComplete`.
```tsx preview title="TextField"
import { TextField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `EmailField`
An `type="email"` input with `inputMode="email"`, `autoComplete="email"` and a case-insensitive `pattern` that requires a domain with a top-level part (`jane@example` fails, `Jane.Doe+news@Example.com` passes). Each default can be overridden.
```tsx preview title="EmailField"
import { EmailField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `PhoneField`
A `type="tel"` input with `inputMode="tel"` and `autoComplete="tel"`. It adds no pattern, because phone formats vary; pass `pattern` if you need one.
```tsx preview title="PhoneField"
import { PhoneField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `PasswordField`
A `type="password"` input. Set `autoComplete` to `current-password` on sign-in forms and `new-password` on sign-up and reset forms, so password managers act correctly.
```tsx preview title="PasswordField"
import { PasswordField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `NumberField`
A `type="number"` input with `inputMode="decimal"`. Use `min`, `max` and `step` for the range.
```tsx preview title="NumberField"
import { NumberField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `DateField`
A date input. `inputType` picks `'date'` (default) or `'datetime-local'`; `min` and `max` take ISO strings.
```tsx preview title="DateField"
import { DateField, FormRow } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `TextareaField`
A multi-line text area. The default CSS gives it a fixed height of 328 px with resizing off; `resize` lets the visitor resize it vertically, and a `style` or class sets another height.
```tsx preview title="TextareaField"
import { TextareaField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `SelectField`
A [`FormSelect`](https://docs.systhema.app/ar/components/form-select.md) with a label and messages. It takes the same `Option` and `SelectPlaceholder` children and the same `selectClassName`, `iconClassName`, `prepend`, `append` and `disableIcon` props. `className` goes on the select wrapper.
```tsx preview title="SelectField"
import { Option, SelectField, SelectPlaceholder } from '@systhemaui/next'
export default function Demo() {
return (
Choose a topic
)
}
```
### `FileField`
A [`FormFileInput`](https://docs.systhema.app/ar/components/form-controls.md#formfileinput) with a label and messages; `accept` and `multiple` pass through.
```tsx preview title="FileField"
import { FileField } from '@systhemaui/next'
export default function Demo() {
return (
)
}
```
### `RadioField` and `CheckboxField`
The group fields take their choices as `items`, each an object with the [`FormRadio` or `FormCheckbox`](https://docs.systhema.app/ar/components/form-choice.md) props minus `name`. The group label is a `