Astryx Design System

Field@astryxdesign/core v0.0.15 · Field

Usage

Field wraps any input control with a label, description, and validation status. Use it to build accessible forms with consistent labeling, optional/required indicators, and inline error, warning, or success feedback.

ts
import {Field} from '@astryxdesign/core/Field'

Best practices

Guidance	Practices
Do	Always provide a label for accessibility, even if visually hidden with isLabelHidden.
Do	Use the status prop with clear messages to provide inline validation feedback.
Do	Add a description when the label alone does not explain what the field expects, like format hints or constraints.
Don't	Set both isOptional and isRequired on the same field.
Don't	Use the detached status variant on bordered inputs; reserve it for checkboxes, switches, and sliders.
Don't	Hide the label without providing an alternative way for the user to understand the field purpose.

Examples

Common configurations, variations, and states.

Field — Required & Optional

Required and optional field indicators side by side. Use isRequired on fields the user must fill in, and isOptional to clarify which fields can be skipped.

Field — Validation States

All three validation states: error, warning, and success. Use error for invalid input, warning for potential issues like reserved names, and success to confirm valid entries like API keys.

Field — Description

Fields with helper text below the label. Use descriptions to explain format requirements, constraints, or what happens with the data, like "At least 8 characters" or "We will send a confirmation link".