Getting Started
Components
Search for a command to run...
Labels create explicit associations between descriptive text and form inputs, improving accessibility for screen reader users and enabling click-to-focus behavior where clicking the label focuses the associated input. Proper labeling is essential for form accessibility and helps all users understand what information is expected in each field. Labels support both explicit associations via htmlFor attribute and implicit associations by wrapping the input element.
Use labels for all form inputs to ensure accessibility and improve usability. Labels should be clear, concise, and positioned consistently throughout your forms. Avoid using placeholder text as a replacement for labels, as placeholders disappear when users start typing and aren't accessible to all assistive technologies.
import { Label } from "@strongtie/design-system/label"All components accept standard HTML attributes and React props.
Components can be styled using the className prop. The design system uses Tailwind CSS for styling.
CSS classes used by this component:
labelEnsure proper accessibility attributes are added when implementing this component.