Label

Install and import #

yarn add @welcome-ui/label @xstyled/styled-components @xstyled/system react react-dom styled-components

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

Default #

label DOM, use on Field.

Default label
Show editor

Required #

With required property.

Required label
Show editor

Variants #

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

Warning variant
Error variant
Info variant
Success variant
🐶
Custom icon
Show editor

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

Error variant with a link and all of that jazz because of the fox
Show editor

Disabled #

Customize label for disabled elements.

Disabled label
🔒
Custom icon disabled label
🔒
Disabled custom icon warning label
Show editor

Properties #

Dependencies #

• - @welcome-ui/icons.lock
  ^3.0.0
• - @welcome-ui/system
  ^3.0.0
• - @welcome-ui/utils
  ^4.0.0-alpha.0
• - @welcome-ui/variant-icon
  ^4.0.0-alpha.0

Peer dependencies #

• - @xstyled/styled-components
  ^2.2.3
• - @xstyled/system
  ^2.2.3
• - react
  ^16.10.2 || ^17.0.1
• - react-dom
  ^16.10.2 || ^17.0.1
• - styled-components
  ^5.2.1