Groups field copy beside an inline control.

field_content/1 is useful when a checkbox, switch, or radio item sits next to label and helper text.

Example

heex title="Field content" align="full" <.field_control class="flex items-start gap-3"> <.checkbox id="desktop-alerts" name="alerts[desktop]" /> <.field_content> <.field_label> <.label for="desktop-alerts">Desktop alerts</.label> </.field_label> <.field_description>Show deployment alerts on this device.</.field_description> </.field_content> </.field_control>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Stacks related fields with consistent spacing.

Use field_group/1 inside field_set/1 for semantic form sections, or on its own when a form needs a low-level layout wrapper without extra behavior.

Examples

heex title="Field family" align="full" vrt <.field_set> <.field_legend>Notification preferences</.field_legend> <.field_description>Choose how Cinder UI should notify your team.</.field_description> <.field_group> <.field> <:label for="deployments">Deployments</:label> <.input id="deployments" name="notifications[deployments]" value="email" /> <:description>Release and rollback notifications.</:description> </.field> <.field_separator /> <.field_control class="flex items-start gap-3"> <.checkbox id="weekly-summary" name="notifications[weekly_summary]" /> <.field_content> <.field_label> <.label for="weekly-summary">Weekly summary</.label> </.field_label> <.field_description>Send a digest every Monday morning.</.field_description> </.field_content> </.field_control> </.field_group> </.field_set>

heex title="Field group with separator" align="full" <.field_group> <.field> <:label for="response_email">Response emails</:label> <.input id="response_email" name="notifications[responses]" /> </.field> <.field_separator>Tasks</.field_separator> <.field> <:label for="task_email">Task emails</:label> <.input id="task_email" name="notifications[tasks]" /> </.field> </.field_group>

Screenshot

View live examples and full component docs.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Legend for a field_set/1.

The default :legend variant is sized for section titles. Use variant={:label} when nesting fieldsets and you want the legend to align with ordinary field labels.

Examples

heex title="Field legend" align="full" <.field_legend>Delivery method</.field_legend>

heex title="Label-sized legend" align="full" <.field_legend variant={:label}>Notification channel</.field_legend>

Screenshot

View live examples and full component docs.

Attributes

• variant (:atom) - Defaults to :legend. Must be one of :legend, or :label.
• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block (required)

Visual divider for separating sections inside a field_group/1.

Use it without content for a simple divider, or pass inline content when the separator should name the next section.

Examples

heex title="Field separator" align="full" <.field_separator />

heex title="Field separator with label" align="full" <.field_separator>Advanced options</.field_separator>

Screenshot

View live examples and full component docs.

Attributes

• class (:string) - Defaults to nil.
• Global attributes are accepted.

Slots

• inner_block

Semantic fieldset wrapper for grouping related controls.

Pair field_set/1 with field_legend/1, optional field_description/1, and field_group/1 so grouped controls stay accessible and visually consistent.

Example

heex title="Field set" align="full" <.field_set> <.field_legend>Billing address</.field_legend> <.field_description>Used for invoices and payment receipts.</.field_description> <.field_group> <.field> <:label for="billing_city">City</:label> <.input id="billing_city" name="billing[city]" /> </.field> </.field_group> </.field_set>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)

Label-styled title text for custom field content.

Use field_title/1 when there is no direct input label target, such as selectable cards or composed option rows.

Example

heex title="Field title" align="full" <.field_content> <.field_title>Virtual machine</.field_title> <.field_description>Run workloads on a dedicated host.</.field_description> </.field_content>

## Screenshot

View live examples and full component docs.

## Attributes

class (:string) - Defaults to nil. Global attributes are accepted. ## Slots

* inner_block (required)