Field

Most inputs take label and description props directly. Reach for flux:field when you need to compose the parts yourself.

Mobile number

A verification code will be sent to this number.

<flux:field>
    <flux:label>Mobile number</flux:label>
    <flux:description>A verification code will be sent to this number.</flux:description>

    <flux:input type="tel" placeholder="0912 345 6789" />

    <flux:error name="phone" />
</flux:field>

Inline

variant="inline" puts the label beside the control — the usual shape for a switch or a single checkbox.

Free shipping

In stock only

<div class="space-y-3">
    <flux:field variant="inline">
        <flux:label>Free shipping</flux:label>
        <flux:switch checked />
    </flux:field>

    <flux:field variant="inline">
        <flux:label>In stock only</flux:label>
        <flux:switch />
    </flux:field>
</div>

Required and badges

A label can carry a badge, or aside content on the trailing edge.

Full name

<flux:field>
    <flux:label badge="Required">Full name</flux:label>
    <flux:input />
</flux:field>

Fieldset

Group several fields under one legend.

Shipping address

Street

City

<flux:fieldset>
    <flux:legend>Shipping address</flux:legend>

    <div class="space-y-4">
        <flux:input label="Street" />
        <flux:input label="City" value="Tehran" />
    </div>
</flux:fieldset>

Reference

flux:field

Prop	Description
variant	Options: `block`, `inline`. Default: `block`.

flux:label

Prop	Description
badge	Badge text after the label, e.g. `Required`.
aside	Content pinned to the trailing edge of the label row.
trailing	Content directly after the label text.
sr-only	Hides the label visually but keeps it for screen readers.

flux:description

Prop	Description
sr-only	Hides the description visually but keeps it for screen readers.

flux:error

Prop	Description
name	The validation key to show errors for.
message	An explicit message instead of one from the error bag.
bag	Error bag name. Default: `default`.
icon	Icon name. Default: `exclamation-triangle`.

flux:fieldset

Prop	Description
legend	Shorthand for `flux:legend`.
description	Description under the legend.

flux:legend

The fieldset caption. Takes no props.