Label

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.