Field @astryx-svelte/core v0.3.0 · Field
Usage
Field is a low-level wrapper for custom, native, or third-party controls that do not already provide field label, description, and status UI. Use it when you need the Field shell around a control you own; use styled Astryx inputs like TextInput, Typeahead, and Select directly when they already expose label, description, and validation props.ts
Best practices
| Guidance | Practices |
|---|---|
| Do | Wrap custom controls, native inputs, or third-party widgets that need labeling, helper text, optional/required indicators, or validation status. |
| Do | Always provide a label for accessibility, even if visually hidden with isLabelHidden. |
| Do | Use inputID and descriptionID to connect the label and description to the inner control with htmlFor and aria-describedby. |
| Don't | Nest Field around styled inputs such as TextInput, Typeahead, Select, DateInput, or TextArea; those components already render their own Field shell. |
| Don't | Use the attached status variant on non-bordered controls such as sliders, switches, or checkboxes; use detached so the message does not overlap the control. |
| Don't | Set both isOptional and isRequired on the same field. |
| 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".