Label
Label component for form fields with automatic required indicator support
Basic Usage
The most basic label within a field component:
Name
<neura::field>
<neura::label>Name</neura::label>
<neura::input type="text" placeholder="Enter your name" />
</neura::field>Required Field Indicator
When used within a field component with the required prop, the label automatically shows a red asterisk:
Email Address
<neura::field required>
<neura::label>Email Address</neura::label>
<neura::input type="email" placeholder="email@example.com" />
</neura::field>Using Text Prop
You can use the text prop instead of slot content:
Username
<neura::field>
<neura::label text="Username" />
<neura::input type="text" placeholder="johndoe" />
</neura::field>Standalone Usage
While typically used within fields, labels can be used standalone:
Standalone Label
This label is used outside of a field component.
<neura::label>Standalone Label</neura::label>
<neura::text>This label is used outside of a field component.</neura::text>With Different Form Controls
Labels work with all form controls:
Text Input
Textarea
Select
I agree to the terms and conditions
Use Cases
Form Labels
Full Name
Email Address
Company
Checkbox and Radio Labels
I accept the terms and conditions
Subscribe to newsletter
Best Practices
Do
- Use clear and descriptive label text
- Use the required prop on the field component for required fields
- Keep labels concise but informative
- Use labels for all form controls for accessibility
Don't
- Don't use overly long or verbose labels
- Don't manually add asterisks for required fields (use the required prop)
- Don't skip labels for form controls
- Don't use labels for decorative purposes only
Properties
| Property | Type | Default | Description |
|---|---|---|---|
| text | string|null | null | Label text. Alternative to using slot content. |
| required | boolean | false | Automatically inherited from parent field component using the aware directive. Shows red asterisk when true. |
| class | string | - | Additional CSS classes. Default: text-sm text-start font-medium select-none text-neutral-900 dark:text-white |