InputLabel

A label wrapper for form inputs. Associates a visible label, optional hint text, and an optional required asterisk with any wrapped form control.

Overview

InputLabel renders a <label> element that wraps a form control. Because the input is a child of the label, they are semantically linked without needing htmlFor — clicking the label text focuses the wrapped input automatically.

It is the recommended way to label any form element in UnflowUI.

Import

import { InputLabel } from '@unflow/ui/components/InputLabel';

Props

Prop	Type	Default	Description
`label`	`string`	—	Label text rendered above the input
`hint`	`string`	—	Helper text rendered below the input
`required`	`boolean`	`false`	Adds a required asterisk to the label
`disabled`	`boolean`	`false`	Applies disabled styling to label and hint
`readonly`	`boolean`	`false`	Applies read-only styling
`children`	`ReactNode`	—	Required. The form control to wrap

All standard HTMLLabelElement props are forwarded.

Default

Email address

We'll never share your email.

<InputLabel label="Email address" hint="We'll never share your email.">
  <input type="email" placeholder="you@example.com" />
</InputLabel>

Wrapping a Switch

Dark mode

Apply dark theme across the interface.

<InputLabel label="Dark mode" hint="Apply dark theme across the interface.">
  <Switch checked={on} onChange={(e) => setOn(e.target.checked)} aria-label="Dark mode" />
</InputLabel>

Required field

Password

Minimum 8 characters.

<InputLabel label="Password" hint="Minimum 8 characters." required>
  <input type="password" placeholder="Enter password" />
</InputLabel>

A required asterisk (*) is appended to the label text when required is true.

Accessibility

The <label> wrapper creates an implicit label association — no htmlFor needed when the input is a direct child.
If the wrapped control needs an explicit aria-label (e.g. Switch), provide it on the control itself.
required, disabled, and readonly propagate visual state; they do not set HTML attributes on the wrapped input — set those directly on the control.