form

27 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.

Form.Submit component

Form.Submit accepts: asChild (boolean, default false, to change rendered element and merge props/behavior).

Form built on constraint validation API

Form is built on top of the native browser constraint validation API.

Form component anatomy and parts

The Form component consists of: Form.Root (contains all parts), Form.Field (wrapper for a field), Form.Label (label element), Form.Control (control element, default is input), Form.Message (validation message), Form.ValidityState (render-prop to access validity state), and Form.Submit (submit button).

Form.Root props

Form.Root accepts: asChild (boolean, default false, to change rendered element and merge props/behavior), onClearServerErrors (function, called when form is submitted or reset and server errors need clearing).

Form.Field props

Form.Field accepts: asChild (boolean, default false), name (required string, passed to control and used to match validation messages), serverInvalid (optional boolean, marks field as invalid on server).

Form.Field data attributes

Form.Field supports [data-invalid] (present when field is invalid) and [data-valid] (present when field is valid).

Form.Label data attributes

Form.Label supports [data-invalid] (present when field is invalid) and [data-valid] (present when field is valid).

Form.Control data attributes

Form.Control supports [data-invalid] (present when field is invalid) and [data-valid] (present when field is valid).

Form.Message props and matching

Form.Message accepts: asChild (boolean, default false), match (optional, can be a validity state string like 'badInput', 'patternMismatch', 'rangeOverflow', 'rangeUnderflow', 'stepMismatch', 'tooLong', 'tooShort', 'typeMismatch', 'valid', 'valueMissing', or a function (value: string, formData: FormData) => boolean, or (value: string, formData: FormData) => Promise<boolean>), forceMatch (optional boolean, default false, forces message to show regardless of client-side matching logic), name (optional string, targets specific field by name when outside Field part). When nested in Field, automatically wired to control.

Form.ValidityState props and behavior

Form.ValidityState is a render-prop component that accepts: children (optional function receiving validity state), name (optional string to target specific field when outside Field part). Returns the field's ValidityState from the constraint validation API.

Form validation capabilities

Form supports built-in validation (using HTML constraint validation attributes like required, min, max), custom validation (via match function prop), full customization of validation messages, accessible validation messages, client-side and server-side validation scenarios, and fully managed focus.

Default validation message behavior

When no children are provided to Form.Message, it renders a default error message for the given match. For example, Form.Message with match='valueMissing' renders 'This value is missing'.

Custom validation function signature

Custom validation functions passed to match prop receive two arguments: the current value of the control (string) as first argument, and the entire FormData as second argument. The function can be sync or async (can return a promise).

Styling form validity states

Use [data-valid] and [data-invalid] attributes on Form parts to style components based on field validity. For example, .FormLabel[data-invalid] { color: red; } to style invalid labels.

Server-side validation with Form.Message

To support server-side validation, pass forceMatch prop to Form.Message to force message visibility regardless of client-side matching logic, and pass serverInvalid boolean prop to Form.Field to mark field as invalid. Use onClearServerErrors callback on Form.Root to clear server errors before re-submission or form reset.

Composing Form.Control with custom components

Use asChild on Form.Control to compose it with custom components like TextField.Input or select elements. Example: <Form.Control asChild><TextField.Input variant="primary" /></Form.Control>

Custom validation with match function example

<Form.Field name="name"><Form.Label>Full name</Form.Label><Form.Control /><Form.Message match={(value, formData) => value !== "John"}>Only John is allowed.</Form.Message></Form.Field>

Server-side validation example

import * as React from "react"; import { Form } from "radix-ui"; function Page() { const [serverErrors, setServerErrors] = React.useState({ email: false, password: false }); return <Form.Root onSubmit={(event) => { const data = Object.fromEntries(new FormData(event.currentTarget)); submitForm(data).then(() => {}).catch((errors) => setServerErrors(mapServerErrors(errors))); event.preventDefault(); }} onClearServerErrors={() => setServerErrors({ email: false, password: false })}><Form.Field name="email" serverInvalid={serverErrors.email}><Form.Label>Email address</Form.Label><Form.Control type="email" required /><Form.Message match="valueMissing">Please enter your email.</Form.Message><Form.Message match="typeMismatch" forceMatch={serverErrors.email}>Please provide a valid email.</Form.Message></Form.Field><Form.Field name="password" serverInvalid={serverErrors.password}><Form.Label>Password</Form.Label><Form.Control type="password" required /><Form.Message match="valueMissing">Please enter a password.</Form.Message>{serverErrors.password && <Form.Message>Please provide a valid password. It should contain at least 1 number and 1 special character.</Form.Message>}</Form.Field><Form.Submit>Submit</Form.Submit></Form.Root>; }

Form.Label automatically wired to Form.Control

When Form.Label is nested inside a Form.Field, it is automatically associated with the Form.Control in that field using the Field's name prop.

Form.Message automatic wiring within Field

When Form.Message is nested inside a Form.Field, it is automatically wired (functionality and accessibility) to the Form.Control in that field. When used outside a Field, must pass a name prop matching a field.

Limitation: Form composition with Radix primitives

At the current time, it is not possible to compose Form with Radix's other form primitives such as Checkbox, Select, etc. This is noted as a known limitation with work in progress on a solution.

Form component runtime errors outside Form.Field

Fixed runtime errors for Form.Message, Form.Control, Form.Label, and Form.ValidityState when they are rendered outside of Form.Field components.

Form control values not updating on form reset

Fixed a bug in form control components to ensure their values are updated when their associated form is reset. This affects RadioGroup, Slider, Select, and Switch.

Form controls using Radix Primitive by default

All form controls with internal bubble inputs now use the Radix Primitive component by default. This will allow exposing these components in a future release so users can better control this behavior in the future.

Radix Themes 3.0.0 breaking change: TextField removes Input part

Radix Themes 3.0.0 removed the Input part from TextField, simplifying how props are forwarded. All TextField.Input parts used without TextField.Root should be renamed to TextField.Root. All TextField.Input parts used within TextField.Root should be removed and their props put directly on TextField.Root. All TextField.Slot parts placed to the right of TextField.Input need the side="right" prop, unless two slots are used within one TextField on different sides (in which case they are automatically placed correctly).

Radix Themes 3.0.0 TextArea radius and resize props

Radix Themes 3.0.0 added `radius` and `resize` props to the TextArea component.

Radix Themes 2.0.0 breaking change: TextArea implementation rework

Radix Themes 2.0.0 reworked TextArea's internal implementation to use multiple HTML nodes for styling. It now behaves like a true display: block element filling available space horizontally. The `style` and `className` are forwarded to the wrapping div, while `ref` and other props are forwarded to the textarea itself. Make sure custom styles and layouts work as expected.

Give your agent this brain