Label

2.2.1

El componente Label nos permite nombrar elementos dentro de un formulario.

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;

Anatomía del componente

El componente está integrado por texto base estilizado, que consume nuestros tokens de tipografía y colores.

Guidelines

Usamos este componente como un slot que puede recibir texto e iconos con tooltips, que ayuden a la persona usuaria a entender cuál es la información requerida durante el llenado del formulario.

Recomendaciones de uso:

Nombrar campos de Input texto
Nombrar opciones en un Select
Nombrar opciones en una lista de Radio Button
Nombrar opciones en una lista de Checkbox

Implementación

Instalá el 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.