The RhLabel is used to create a label for an input or form element. The component accepts two props required and labelFor for customizations.
Once installed, you can import the RhLabel component into your React application:
import {RhLabel} from "@rhythm-ui/react"
Then, you can use the RhLabel component in your JSX code:
<RhLabel label="Input Label" labelFor="label-for-input"> Label Text </RhLabel>
Name | Type | Default | Description |
|---|---|---|---|
| required | boolean | Defines if the label is attached to the required element | |
| labelFor | string | Pass the id of the attached html element | |
| ref | Ref<HTMLLabelElement> | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom | |
| key | Key |
A boolean prop that determines whether the label is attached to a required element. If set to true, the label will have an asterisk (*) appended to it to indicate that the associated input element is required. If set to false or omitted, no asterisk will be displayed.
<RhLabel label="Input Label" labelFor="label-for-input" required> Label Text </RhLabel>