#Field

The scaffolding around a control — label, description, error and the required marker — so the control itself only has to be the control. Only Input, Textarea and Slider read this context automatically; wrap anything else and you get the layout, but the labelling still has to be wired by hand.

Source · Storybook

#Usage

import { Button } from '@wallarm-org/design-system/Button';
import { Checkbox, CheckboxIndicator, CheckboxLabel } from '@wallarm-org/design-system/Checkbox';
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from '@wallarm-org/design-system/Field';
import { Input } from '@wallarm-org/design-system/Input';
import { NumberInput } from '@wallarm-org/design-system/NumberInput';
import { Radio, RadioGroup, RadioIndicator, RadioLabel } from '@wallarm-org/design-system/Radio';
import { Select, SelectButton, SelectContent, SelectOption, SelectOptionText, SelectPositioner } from '@wallarm-org/design-system/Select';
import { HStack } from '@wallarm-org/design-system/Stack';
import { Switch, SwitchControl, SwitchLabel } from '@wallarm-org/design-system/Switch';
import { Textarea } from '@wallarm-org/design-system/Textarea';

#Examples

#Inputs

Input inside a Field is the case that works end to end — it reads the context, so the label points at it and the error sets aria-invalid without being passed anything.

#Textareas

Same wiring as Input, since Textarea reads the context too. The description sits above the box rather than below, so it is read before the reader starts typing.

#Fieldset

FieldSet with FieldLegend for a question with several controls under it. This is the grouping that assistive technology announces, so use it rather than a heading.

#Switches

A field around switches. Note that the layout is all you get here — Switch doesn't read field context, so the label and description are visual, not wired.

#Radios

A field around a radio group, where the group's own name does the binding and the field supplies the question above it.

#Checkboxes

A field around checkboxes. FieldLegend is the right home for the question, since each checkbox already carries its own label.

#Number inputs

A field around NumberInput, which composes its own label rather than reading the field's — check the labelling in the rendered markup rather than assuming.

#Selects

A field around Select. The trigger is a button, so the label needs to point at it explicitly for the pairing to survive a screen reader.

#Props

#Explorer