Label

The visible text that names a form control or a group of controls.

<script setup lang="ts">
import { FsInput, FsLabel } from '@fivespark/ui'
</script>

<template>
  <div class="grid w-full max-w-xs gap-2">
    <FsLabel for="bedrijfsnaam">Bedrijfsnaam</FsLabel>
    <FsInput id="bedrijfsnaam" autocomplete="organization" />
  </div>
</template>

Usage

<script setup lang="ts">
import { FsInput, FsLabel } from '@fivespark/ui'
</script>

<template>
  <FsLabel for="bedrijfsnaam">Bedrijfsnaam</FsLabel>
  <FsInput id="bedrijfsnaam" />
</template>

Field renders a label for you from its label prop, so reach for FsLabel only when you build a field layout of your own. Checkboxes, radios and switches carry their own label. Keep the text plain: no links, icons or controls inside.

Examples

Required

required adds the asterisk. The asterisk is left out of the control's name, so also set required on the control.

<script setup lang="ts">
import { FsInput, FsLabel } from '@fivespark/ui'
</script>

<template>
  <div class="grid w-full max-w-xs gap-2">
    <FsLabel for="btw-nummer" required>Btw-nummer</FsLabel>
    <FsInput id="btw-nummer" required />
  </div>
</template>

Naming a group

as="legend" names a fieldset. A group cannot be required itself, so announceRequired also says "verplicht" to screen readers.

<script setup lang="ts">
import { FsCheckbox, FsLabel } from '@fivespark/ui'
</script>

<template>
  <fieldset class="grid gap-2">
    <FsLabel as="legend" required announce-required>Documenten bij de offerte</FsLabel>
    <FsCheckbox label="Algemene voorwaarden" />
    <FsCheckbox label="Technische tekening" />
  </fieldset>
</template>

Naming through aria-labelledby

as="span" renders a label that a control points at with aria-labelledby, for a control that has no <label for>, such as one inside a table row.

<script setup lang="ts">
import { FsInput, FsLabel } from '@fivespark/ui'
</script>

<template>
  <div class="grid w-full max-w-xs gap-2">
    <FsLabel as="span" id="notitie-label">Interne notitie</FsLabel>
    <FsInput aria-labelledby="notitie-label" />
  </div>
</template>

API Reference

FsLabel

Prop	Type	Default	Description
as	"label" | "legend" | "span"	"label"	`label` names the control in `for`; `legend` names its fieldset; `span` names what points at its `id`.
for	string		The id of the control it names. Only with `as="label"`.
id	string		For a control named by `aria-labelledby`.
required	boolean	false	Shows the asterisk, which is hidden from the name: the control carries the state.
announceRequired	boolean	false	With `required`, also says "verplicht" or "required", hidden: for a group, which cannot carry the state itself.
readonly	boolean	false	Says "alleen lezen" or "read-only", hidden: for a control with no native read-only state.
requiredText	string		Replaces the hidden "verplicht" or "required".
readonlyText	string		Replaces the hidden "alleen lezen" or "read-only".

Slot	Props	Description
default	any	The label's text: plain text, with no link, control or icon.