# 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 `` 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: ```html 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. ```html Username Email Address ``` ## 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 `` element. ```html Username ``` ## Accessibility The `Label` component is based on the native `` 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 ### Props | Name | Type | Default | Description | | --- | --- | --- | --- | | `for` | string | `undefined` | The `id` of the input the label belongs to. It is a native attribute passed to the element. | | `class` | string | `undefined` | Custom classes merged with the default label styles. | ### Snippets | Name | Description | | --- | --- | | `children` | The content of the label. It is required; a Label without content renders nothing. | --- Category: Components Keywords: label, form-label, form, component, svelte, svelte-5, theui-svelte, component-library, ui, tailwindcss Full documentation set: https://www.theui.dev/llms-full.txt