Label
The caption above a field, and the same caption anywhere else. One component, polymorphic, so the word that titles a group of controls is styled by whatever it needs to be.
API
Props
| prop | type | default | |
|---|---|---|---|
as? | ElementType | "label" | the element or component to render |
disabled? | boolean | false | dims it; also exposed as data-margo-disabled |
…rest | props of as | — | typed against the chosen element |
Examples
Usage
It renders a label by default, so it stands above the field and points at it with htmlFor. Clicking the caption focuses the field, and the field keeps its own box — the caption never wraps it, so the padding that indents the word does not indent the box with it.
<Label htmlFor="email">email</Label>
<Input>
<Input.Text id="email" placeholder="you@domain.com" />
<Input.Icon />
</Input>A caption on its own
Not every caption labels a field. A section heading in a sidebar, the title of a panel, the word above a group of controls — all of them want the same treatment and none of them wants a label element, which is what as is for. The sidebar of this site and the header of every demo box on it are exactly that.
<Label as="span">components</Label>Disabled
Standing beside the field rather than around it, the caption cannot see the field's state, so disabled dims it to match. As everywhere in the kit this is visual only: it is the disabled attribute on the field that makes it unavailable, the caption merely stops competing for attention once it is.
<Label htmlFor="city" disabled>city</Label>
<Input>
<Input.Text id="city" placeholder="unavailable" disabled />
<Input.Icon />
</Input>Details
One component
Everything the caption is lives in one class list, on the element that carries the word. There is no container above it holding the spacing, and no child selector reaching through one to style the other: overriding the caption is a className on the caption.
<Label as="p" className="mb-0 pl-0 rounded-margo-1 border-margo border-border p-3">
preview
</Label>preview