Label

A form label that matches the other form components and takes its classes from the Form or Fieldset around it. It accepts any content.

About

The Label component is designed to simplify the creation of form labels while maintaining consistency in styling and functionality. It renders a native <label> element with the library's label styles. The form inputs, like Input, Checkbox and Toggle, use it internally, and you can use it directly when you build a custom field.

Example

To use the Label component, import it, place the label text inside it, and set the for attribute to the id of the input it describes. Here's a basic example:

Svelte 
<script>
  import { Label } from "theui-svelte";
</script>

<Label for="username">Username</Label>
<input id="username" />

In this example, a label with the text "Username" is rendered and associated with the input through the for attribute. Inside a Fieldset or Form, the label uses their shared settings, like size and reset. Floating labels are only used by the Input and Select components, so a standalone Label never floats, even in a form with floating labels.

Label Content

Everything placed inside the Label component becomes its content. It can be plain text or any mix of elements and components, like icons or badges. A Label without content renders nothing.

Svelte 
<!-- Text label -->
<Label for="username">Username</Label>

<!-- Label with elements -->
<Label for="email"><strong>Email</strong> Address</Label>

Customization

The Label component can be easily customized using the native class attribute. By adding your own CSS classes or the TailwindCSS, you can override or extend the default styles of the label to match your design requirements. Any other attributes you add are passed to the <label> element.

Svelte 
<Label for="username" class="text-brand-500 font-bold text-lg">Username</Label>

Accessibility

The Label component is based on the native <label> element, which improves accessibility by providing an associated label for form elements. Connect it to the input by setting its for attribute to the input's id (the form inputs of this library do this for you). This makes it easier for users, especially those using screen readers, to understand what each input is for. The label also increases the clickable area, improving the user experience.

Configuration