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 #
Name | Type(s) | Default | Required |
---|---|---|---|
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 #
Previous
InputTextNext
MarkdownEditor