Label

2.2.1

O componente label nos permite nomear elementos dentro de um formulário.

Default

Hidden

Skeleton

import React from "react";
import { Label, Icon } from "@nimbus-ds/components";
import { BoxPackedIcon } from "@nimbus-ds/icons";

const Example: React.FC = () => (
  <Label>
    <Icon source={<BoxPackedIcon />} />
    Label text:
  </Label>
);

export default Example;

Anatomia do componente

O componente é composto por texto base estilizado, que consome nossos tokens de tipografia e cores.

Guidelines

Utilizamos esse componente como um slot que pode receber texto e ícones com tooltips, que ajudem o usuário a entender qual a informação requerida durante o preenchimento de formulários.

O Label é recomendado para:

Nomear campos de Input texto
Nomear opcões em um Select
Nomear opções em uma lista Radio Button
Nomear opções em uma lista de Checkboxes

Implementação

Instale o componente via terminal.

npm install @nimbus-ds/label

Props

Additional props are passed to the <Label> element. See label docs for a list of props accepted by the <Label> element.

Label

Name	Type	Description
children*	React.ReactNode	The content of the label.
htmlFor	string	The for attribute specifies which form element a label is bound to.
hidden	boolean	If true the label will be visually hidden but maintain accessibility purpose

Label.Skeleton

Name	Type	Description
width	string	Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own.
height	string	Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card.
data-testid	string	This is an attribute used to identify a DOM node for testing purposes.