Label

A reusable component for rendering form labels, ensuring consistent styling and behavior across all inputs. It supports both string and snippet-based labels and integrates seamlessly with the Form component.

About

The Label component is designed to simplify the creation of form labels while maintaining consistency in styling and functionality. The component supports both plain text labels (as strings) and dynamic labels (as Svelte snippets), making it flexible for various use cases.

Example

To use the Label component, import it and pass the label and id props. Here's a basic example:

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

<Label label="Username" id="username" />

In this example, a label with the text "Username" is rendered and associated with an input field using the id prop. The label will inherit styling and behavior from the parent Form component (if used).

Label Content

The label prop defines the content of the label. It supports both string and Snippet types, making it flexible for static or dynamic label content. If the label is a string, it is rendered as plain text or HTML. If the label is a Snippet, it is rendered dynamically, allowing for custom components or complex HTML structures.

Svelte 
<!-- String label -->
<Label label="Username" id="username" />
<!-- HTML label -->
<Label label="<strong>Email</strong> Address" id="email" />
<!-- Snippet label -->
<Label id="email">
  <!-- Custom elements for the Label snippet-->
</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.

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

Accessibility

The Label component is based on the native <Label> element, which improves accessibility by providing an associated label for form elements. It automatically connects with the input field using the for attribute, making 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