Components/Label

Label

An accessible form label that wraps a native <label> element, with optional required and disabled states.

import { Label } from "@animui/ui"

Basic

Required

Disabled

Props

PropTypeDefaultDescription
childrenReactNodeLabel text or content.
htmlForstringID of the form control this label is associated with.
requiredbooleanfalseRenders a red asterisk to mark the field as required.
disabledbooleanfalseDims the label and shows a not-allowed cursor.
classNamestringAdditional classes for the label element.

Accessibility

  • Renders a native <label> so clicking it focuses the associated control.
  • Always pass htmlFor matching the input's id to keep the association explicit for screen readers.
  • The required asterisk is visual only; pair it with the input's required attribute for assistive tech.
© 2026 Steal Shadow. MIT License.Report an issue