FormControl API

API reference for the FormControl component: its props with their token values and defaults, the styled-system prop groups, and forwarded HTML attributes.

Demos

For usage examples, visit the component demo page: FormControl

Import

import { FormControl } from '@soroush.tech/design-system/FormControl'

Props

`id`

string - field id. Auto-generated via useId() when omitted. Links FormLabel's htmlFor, the control, and the helper text id (${id}-helper).

`error`

boolean - marks the field invalid. Trickles to the control and to FormHelperText (error color + role="alert").

`disabled`

boolean - disables the field. Trickles to the control.

`required`

boolean - marks the field required. Trickles to the FormLabel indicator and the control.

`size`

keyof Theme['sizes'] - "sm" | "md" | "lg". Trickles to the control. Default resolves to "md".

`fullWidth`

boolean - stretches the root to width: 100% and trickles to the control.

`color`

keyof Theme['palette'] - accent color. Trickles to the control.

`textColor`

keyof Theme['text'] - text color for the field's label, helper, and input content. Trickles to FormLabel, FormHelperText, and TextInput (error helper text keeps the error color).

Styled-system props

All View props pass through to the root (space, layout, etc.), except color, which is the field accent token described above.

`useFormControl`

Hook consumed by controls (TextInput, Checkbox, Radio) and by Field. Merges the control's explicit props with FormControl and Form context per the override chain and returns the resolved { id, error, disabled, required, size, fullWidth, color, 'aria-describedby' }. Uniform defaults (size, the booleans) are applied here; color is left for each control to default, since its domain differs (e.g. Checkbox adds "default").

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.