WUI logo

Label

Allows user to represents a caption for an item in a user interface.

version

4.1.2

install

yarn add @welcome-ui/label

usage

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

Default #

label DOM, use on Field.

<Label>Default label</Label>

Required #

With required property.

<Label required>Required label</Label>

Variants #

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

<Label variant="warning">Warning variant</Label>
<Label variant="error">Error variant</Label>
<Label variant="info">Info variant</Label>
<Label variant="success">Success variant</Label>
<Label icon="🐢">Custom icon</Label>

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

function () {
const [checked, setChecked] = React.useState(false)
const handleToggle = () => setChecked(!checked)
return (
<Label variant="error">
<Checkbox name="labelExample" checked={checked} onChange={handleToggle} />
<div>
<span>Error variant with </span>
<Link href="#">a link</Link>
<span> and all of that jazz because of the fox</span>
</div>
</Label>
)
}

Disabled #

Customize label for disabled elements.

<Label disabled>Disabled label</Label>
<Label disabled disabledIcon="πŸ”’">
Custom icon disabled label
</Label>
<Label disabled disabledIcon="πŸ”’" variant="warning">
Disabled custom icon warning label
</Label>

Properties #

NameType(s)DefaultRequired
checkableField
Boolean
disabled
Boolean
disabledIcon
Element
icon
Element
variant
"error"
"focused"
"info"
"success"
"warning"
required
Boolean
withDisabledIcon
Boolean
true
htmlFor
string

Packages #

Dependencies #
Peer dependencies #