WUI logo


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.

import * as React from 'react'
import { Label } from '@welcome-ui/label'
const Example = () => {
return <Label>Default label</Label>
export default Example



Run the following command:

yarn add @welcome-ui/label

Import component:

import { Label } from '@welcome-ui/label'


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


With required property.


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).