Components / Forms

Label

A visible label with optional required and disabled styling.

Preview

Default labelRequired labelDisabled label

Install

Run in your project

npx @getweini/cli@latest add label

Use cases

Associated control

Make a visible field name activate and identify an input.

Required field marker

Use application-owned language to explain that a field is required.

Usage example

Vue

<script setup lang="ts">
import Label from './components/ui/label/Label.vue'
import Input from './components/ui/input/Input.vue'
</script>

<template>
  <Label for="name" required>Name <template #required>*</template></Label>
  <Input id="name" required />
</template>

More examples

Email label

Match for to the native control id.

Email label

<script setup lang="ts">
import { ref } from 'vue'
import Label from './components/ui/label/Label.vue'
import Input from './components/ui/input/Input.vue'
const email = ref('')
</script>
<template>
  <Label for="email">Email address</Label>
  <Input id="email" v-model="email" type="email" name="email" />
</template>

Localized required marker

The slot owns the visible marker text.

Localized required marker

<script setup lang="ts">
import { ref } from 'vue'
import Label from './components/ui/label/Label.vue'
import Input from './components/ui/input/Input.vue'
const name = ref('')
</script>
<template>
  <Label for="name" required>Full name <template #required>(required)</template></Label>
  <Input id="name" v-model="name" name="name" required />
</template>

Key API

The most useful props, models, slots, events, and methods for this component.

Key API for Label
Name	Type	Default or requirement
`for`	string	required for association
`required`	boolean	false
`disabled`	boolean	false
`required slot`	slot	* marker

Associate the label with a real control id. The required slot supplies its marker; validation belongs on the control.

Implementation notes

The required prop changes label presentation; put required on the control for validation.
The disabled prop dims the label; disable the associated control separately.

Accessibility and localization

Use for and id together, or nest a native control in the label. Translate the required slot alongside the label.