Label
A Label provides an accessible caption for a form control. It supports different sizes and weights, can be marked as required or disabled, and can be positioned relative to the control it wraps.
Usage
<script>
import { Label } from 'fluentui-svelte';
</script>
<Label label="Email" />Size
Use the size prop to control the label text size. Possible values: 'small', 'medium', 'large'.
Weight
Use the weight prop to switch between a regular and a semibold label.
Label Position
Use the labelPosition prop to place the label text relative to the wrapped control. Possible values: 'before', 'after', 'above', 'below'.
Required
Pass a required object to mark the label as required and render a required indicator, which defaults to an asterisk.
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
label | string | 'Label Element' | The text of the label. Falls back to the rendered children. |
size | 'small' | 'medium' | 'large' | 'medium' | The size of the label text. |
weight | 'regular' | 'semibold' | 'regular' | The weight of the label text. |
labelPosition | 'before' | 'after' | 'above' | 'below' | 'after' | Where the label sits relative to the field it describes. |
required | { abbr?: string; message: string; } | Marks the field as required, and describes why through the given message. | |
disabled | boolean | Renders the label as disabled, to match the field it describes. | |
ref bindable | HTMLLabelElement | The DOM reference of the label element. | |
Element Attributes (label) |