# Label

Thin wrapper around native <label> with mielui styling defaults.

- Package: `@mielui/svelte`
- Component version: `1.0.0`
- Depends on Mielui components: _internal/utils
- Shared utilities: utils.cn

## Install

~~~~sh
pnpm dlx @mielui/svelte add label
~~~~

## API

This reference is generated at build time from the component manifest, public `index.ts`, and documentation examples below. Changes to those source files are reflected here in the published Markdown. Standard Svelte and HTML attributes accepted by the exported prop types are supported.


### Label

| Prop | Type | Default | Required | Bindable | Description |
| --- | --- | --- | --- | --- | --- |
| class | (string & (ClassValue \| null)) \| undefined | - | No | No | Classes added to the element. |
| children | Snippet<[]> \| undefined | - | No | No | Content rendered inside. |
| required | boolean \| undefined | false | No | No | Shows a required mark after the text. The mark is hidden from assistive technology, so set `required` on the control as well. |

Also accepts the native HTML attributes and events listed in the rendered API reference.

### Public types

~~~~ts
import type { DefaultProps } from '@mielui/svelte/utils';
import type { HTMLLabelAttributes } from 'svelte/elements';
import Label from './label.svelte';

export type LabelProps = DefaultProps &
    HTMLLabelAttributes & {
        /**
         * Shows a required mark after the text. The mark is hidden from assistive technology, so
         * set `required` on the control as well.
         */
        required?: boolean;
    };

export { Label };
export default Label;
~~~~

## Examples

### Disabled

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
    import { Label } from '@mielui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="disabled" class="cursor-not-allowed opacity-[var(--opacity-disabled)]">
        Username
    </Label>
    <Input id="disabled" type="text" disabled />
</div>
~~~~

### With Required

~~~~svelte
<script lang="ts">
    import { Input } from '@mielui/svelte/components/input';
    import { Label } from '@mielui/svelte/components/label';
</script>

<div class="flex flex-col gap-1.5">
    <Label for="name" required>Full name</Label>
    <Input id="name" type="text" required />
</div>
~~~~

For the rendered reference, visit [/docs/components/label](/docs/components/label).