Welcome UI logo

Label

The Label component is a UI element that provides a textual description or identifier for a corresponding form element, such as an input field, checkbox, or radio button. It enhances accessibility and usability by clearly indicating the purpose of the associated form element, ensuring users understand what information is required or what action is to be taken.

Source
OverviewProps
import { Label } from 'welcome-ui/Label'


const Example = () => {
  return <Label>Default label</Label>
}


export default Example

Examples

Variants

danger, warning, or success variant add specific badge, you can add a custom one as well.

Required

With required property.

Disabled

Customize label for disabled elements.

More content

Checkboxes and radio buttons are normally nested inside labels. If you do this, make sure there is only one other child (in this example, a div).

Input textPassword input