Usage
- Always include a label. A visual label is best, but you may omit it if you use aria-label.
- Use concise labels.
- Use for single-line text input only. For multi-line, use a textarea instead.
- Group related fields with a Fieldset.
- Indicate if it is a required field by including "(required)" next to the label. On the contrary, if most of any related fields are required, do the inverse by including "(optional)".
- Avoid using placeholder text as labels. When users start typing, it disappears.
Design properties
| Property | Values | Default |
|---|---|---|
| Error message Text | string | Error message |
| State Variant | Default | Error | Disabled | Default |
| Property | Values | Default |
|---|---|---|
| Description Text | string | Description |
| Icon InstanceSwap | ||
| Support link Text | string | Learn more |
| Show icon Boolean | true | false | true |
| Disabled Variant | Off | On | Off |
| Show description Variant | Off | On | Off |
| Show support link Variant | Off | On | Off |
Variants
With description
With support link
With icon
States
Default
Disabled
Focused
Error
Writing guidelines
- Write labels in sentence case.
- Be consistent with terms inside the label or description, and any accompanying instructional text.
Related components
Changelog
|
Date |
Version |
Notes |
|---|---|---|
|
February 24, 2026 |
1.0.0 |
Initial Input Text guidelines |