Input Label
A label, required mark and helper text around any field you pass as children.
import { InputLabel } from '@aksornproject/aksara-ui'Label a field
InputLabel renders a <label>, then its children, then helperText, in a column. It does not touch the child. You link the label with htmlFor and the child's id, set native required on the child, and point aria-describedby at the helper text. For a new text field, TextInput does that wiring for you.
<div className="w-full max-w-spacing-320">
<InputLabel
label="Classroom name"
htmlFor="classroom-name"
required
helperText={
<span id="classroom-name-help">Students see this name.</span>
}
>
<Input
id="classroom-name"
name="classroomName"
required
aria-describedby="classroom-name-help"
placeholder="M.4/2 Science"
/>
</InputLabel>
</div>Any child
The child can be an Input, a native <textarea>, a <select> or anything else. helperText renders in a div, so it can hold block content.
<div className="flex w-full max-w-spacing-320 flex-col gap-spacing-16">
<InputLabel label="Subject" htmlFor="subject">
<select
id="subject"
className="h-size-size-44 rounded-radius-radius-10 bg-color-background-surface px-spacing-14 text-color-text-primary inset-ring-(length:--border-border-1) inset-ring-color-border"
>
<option>Thai</option>
<option>English</option>
<option>Mathematics</option>
</select>
</InputLabel>
<InputLabel label="Notes for the teacher" htmlFor="notes">
<textarea
id="notes"
rows={3}
className="rounded-radius-radius-10 bg-color-background-surface px-spacing-14 py-spacing-10 text-color-text-primary inset-ring-(length:--border-border-1) inset-ring-color-border"
/>
</InputLabel>
</div>Required mark and errors
required draws requiredMark after the label, * by default. The mark is part of the label text, so screen readers read it with the name. requiredMarkClassName styles it. destructive colours the helper text with the error colour. helperIcon renders at the end of the label, after the mark.
<div className="w-full max-w-spacing-320">
<InputLabel
label="Type DELETE to confirm"
htmlFor="confirm-delete"
required
requiredMark="(required)"
requiredMarkClassName={typography('label-regular')}
destructive
helperText={
<span id="confirm-delete-help">The text does not match.</span>
}
>
<Input
id="confirm-delete"
status="error"
defaultValue="delet"
aria-describedby="confirm-delete-help"
/>
</InputLabel>
</div>Accessibility
- The label names the field only through
htmlForand a matchingidon the child. requiredis visual. Set nativerequiredon the child yourself.- The helper text has no id of its own. Give its content an id and list it in the child's
aria-describedby. - The required mark is part of the accessible name, so screen readers read "Name *".
TextInputdraws anaria-hiddenstar instead.
API
InputLabel
className styles the <label>. wrapperClassName, ref and the other HTML attributes go to the outer div.
Prop
Type