FieldLabel

Form field label component with required indicator.

Also known as: form label, input label, field title

View in Storybook

When to use

• Labeling form fields. Most form components have built-in label prop, use FieldLabel only for custom layouts.

Import

import { FieldLabel } from '@vacano/ui'

Usage

<FieldLabel>Email Address</FieldLabel>

Required Field

<FieldLabel required>Username</FieldLabel>

Variants

<FieldLabel variant="normal">Normal Label</FieldLabel>
<FieldLabel variant="error">Error Label</FieldLabel>

With Form Field

<div>
  <FieldLabel required>Email</FieldLabel>
  <Input placeholder="Enter email" />
</div>

Props

Prop	Type	Default	Description
children	string	-	Label text
required	boolean	false	Show required indicator
variant	'normal' | 'error'	'normal'	Visual variant
className	string	-	CSS class name

Related

• FieldMessage - Validation and helper messages
• Input - Text input with built-in label