Inputs
Label
The DS field label (Figma "Label" 170:231): Label/Small text, an optional required asterisk, an optional "opcional" word and an optional Help Hint.
Form Field, Radio Group and Textarea render it for you; use it directly only for a control laid out by hand.
<Label htmlFor="nome" required>Nome</Label>Playground
Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.
Label
boolean
Variantes, tamanhos e estados
Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).
Required · False
| Label |
|---|
Required · True
| Label |
|---|
Props
As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
| children | ReactNode | — | The label text (Figma "Text"). Never use a placeholder instead. |
| htmlFor? | string | — | Id of the control this label names (native `<label for>`). |
| required? | boolean | false | Figma `Required=True`: a red asterisk, hidden from screen readers. The control itself carries `required` / `aria-required`, which is what gets announced. |
| optional? | ReactNode | — | Figma "Optional": the muted word after the label, e.g. "opcional". |
| help? | ReactNode | — | Figma "Help": a Help Hint button after the label. It sits outside the `<label>` so clicking it never moves focus to the control. |
| render? | ReactElement<unknown, string | React.JSXElementConstructor<any>> | — | Replaces the inner `<label>` element (e.g. a base-ui `Field.Label`, or a `<legend>` / `<span>` when the label names a group). |
| labelId? | string | — | Id of the inner label element (for `aria-labelledby`). |
| className? | string | — |