# nord-field > Field is the wrapper for a single form control. It lays out a > Field Label, a control (such as an > Input), an optional > Field Description and a > Field Error with consistent spacing. > > Combine several together in a Field Group and > group related groups with a Field Set. > > The Field shares its state with the control through context: a Nord control > placed inside a Field suppresses its own built-in label/hint/error and takes > its accessible name, description and invalid/disabled state from the Field. ## Usage This section includes guidelines for designers and developers about the usage of this component in different contexts. > **Do:** - Connect each [Field Label](/components/field-label/) to its control with the `for` attribute so clicking the label focuses the control and the control gets an accessible name. - Wrap related fields in a [Field Set](/components/field-set/) with a [Field Legend](/components/field-legend/) to group them under a legend. - Mark a Field as `invalid` when showing a [Field Error](/components/field-error/) so the error styling and announcement stay in sync. > **Don't:** - Don’t omit the `for` attribute on a [Field Label](/components/field-label/), as the control would then lack an accessible name. - Don’t put more than one control in a single Field; use a [Field Group](/components/field-group/) for multiple fields. - Don’t reach for a Field around a Nord control that already has its own label, hint and error unless you need the extra composition. ## Examples ### Usage ```html Full name This appears on invoices and emails. Username Choose another username. Subscribe to the newsletter ``` ### Input ```html Username Choose a unique username for your account. ``` ### Disabled ```html Username Choose a unique username for your account. ``` ### Textarea ```html Feedback Share your thoughts about our service. ``` ### Select ```html Department Choose the department you belong to. ``` ### Horizontal ```html Subscribe to the newsletter Remember me ``` ### Field Group ```html Name Email Receive marketing emails ``` ### Choice Card ```html Appointment type Choose how you'd like to see this patient. In-clinic visit See the patient at the clinic. Video consultation Consult remotely over video. ``` ### Responsive ```html
Profile Fill in your profile information. Name Provide your full name for identification Message You can write your message here. Keep it short, preferably under 100 characters. Submit Cancel
``` ### Validation ```html Username Choose another username. Password Password must be at least 8 characters long. ``` ### Overview ```html Profile Visible to colleagues across your clinic. Full name Visible to colleagues across your clinic. Username Choose another username. Subscribe to the newsletter ``` ### Combobox ```html Clinic Choose the clinic this record belongs to. ``` ### Slider ```html Volume Set the playback volume. ``` ### Checkbox ```html Remember me ``` ### Radios ```html Subscription plan Choose the plan that suits you. ``` ### Switch ```html Subscribe to the newsletter ``` ## API Reference ### Properties - **orientation** (`'vertical' | 'horizontal' | 'responsive'`, default: `'vertical'`) — The layout of the field. - vertical (default) stacks the label, control and helper text. - horizontal places the label and control side by side, vertically centered. - responsive lays out horizontally in a wide enough container, otherwise vertical. - **invalid** (`boolean`, default: `false`) — Marks the field as invalid, enabling error styling hooks. Also reflected as data-invalid and propagated to the control via context. - **disabled** (`boolean`, default: `false`) — Disables the field and, via context, its control. Reflected as data-disabled. ### Slots - **(default)** — Default slot for the field parts (label, control, content, description, error). ### CSS Custom Properties - `--n-field-gap` (default: `var(--n-space-s)`) — Controls the spacing between the field parts, using our spacing tokens.