label

import { Label } from "woly";

The Label component lets you add captions for other elements in your project, such as other UI components that don't have their own labels. Users who click or tap the label activate the associated element.

The label text is not only visually associated with its corresponding text input; it is programmatically associated with it too. This means that, for example, a screen reader will read out the label when the user is focused on the form input, making it easier for an assistive technology user to understand what data should be entered.

You can click the associated label to focus/activate the input, as well as the input itself. This increased hit area provides an advantage to anyone trying to activate the input, including those using a touch-screen device.

Example

<Playground>
  <Label priority="secondary">Base label</Label>
</Playground>

Priorities

Error priority can be used to focus user attention on error.

<Playground>
  <Label priority="danger">Error label</Label>
</Playground>

Kinds

NameDescription
LabelBase label. Useful for creating a new kind of label

Props

NameTypeDefaultDescription
prioritystring'secondary'Priority prop to style Label component
...HTMLLabelElement{}Other props are inherited from HTMLLabelElement