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, TextBox } from 'fluentui-svelte';
</script>
<Label label="Email"><TextBox /></Label>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.
Tooltip
Pass tooltipContent, as text, a snippet or a component, to show more about the field in a tooltip from a badge after the label text. The badge is a button named after the label, so keyboard and screen reader users reach it too; tooltipBadge replaces its info icon, and tooltipButtonAttributes its aria-label. People cannot move into a tooltip, so keep links and buttons out of it.
- Banco Pichincha
- Banco Guayaquil
Label form controls
A control inside Label needs no id or for. The own text of a Checkbox, RadioButton or ToggleSwitch inside it is not rendered: the Label names the control. A native <label for> outside a Label names a picker (Dropdown, TagPicker, DatePicker, TimePicker, CalendarDatePicker) only once the page hydrates, because the picker reads it from the page: when rendering on the server, use Label or pass aria-labelledby. A field with an id of its own keeps it: when the text comes before the field (labelPosition 'before' or 'above', the default), pass that id to for too, or the label the server writes points at no field until the page hydrates.
- Bolivia
- Ecuador
Component Props
| Name | Type | Default | Description |
|---|---|---|---|
as | 'div' | 'span' | 'div' | The element used to wrap the label and its field. |
children | Snippet | The field described by the label, rendered beside the label text. | |
wrapperRef bindable | HTMLDivElement | HTMLSpanElement | The DOM reference of the wrapper element. | |
wrapperAttributes | HTMLAttributes | The attributes to spread on the wrapper element. | |
label | string | 'Label Element' | The text of the label. |
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 | null | The DOM reference of the label element. | |
id | string | Generated | The id of the label element. A control inside the label is named after it, including a picker whose visible control stands in for its native field. |
for | string | The field inside | The id of the field the label is for. Without it, the label is for the first field inside it, which takes a generated id when it has none of its own. With labelPosition before or above and a field that has an id of its own, pass that id here, so the server renders the association too. |
tooltipContent | string | Snippet | Component | More about the field, in a tooltip shown from a badge after the label text, on hover and on focus. People cannot move into a tooltip, so keep links and buttons out of it. | |
tooltipBadge | Snippet | Component | InfoRegular | What the badge that shows the tooltip displays. Only rendered with tooltipContent. |
tooltipProps | TooltipProps | The props to spread on the tooltip. | |
tooltipButtonAttributes | HTMLButtonAttributes | The attributes to spread on the button of the badge. Its name is the label text followed by its aria-label. | |
HTMLLabelAttributes without for |