Axonyx UI

Forms

FormGroup

Arrange related fields in one, two, or three columns. Groups collapse to one column below 720px so labels and inputs remain readable on phones.

Next: Fieldset

Paired fields

Use two columns for a title and slug, or any pair of short controls. Resize the viewport to see the group stack.

View code
Code
asx
<FormGroup cols="2" gap="lg">
  <Field htmlFor="group-title">
    <FieldLabel htmlFor="group-title">Title</FieldLabel>
    <Input id="group-title" name="title" placeholder="Release notes" />
  </Field>
  <Field htmlFor="group-slug">
    <FieldLabel htmlFor="group-slug">Slug</FieldLabel>
    <Input id="group-slug" name="slug" placeholder="release-notes" />
  </Field>
</FormGroup>

Compact metadata

Three columns for short fields. The same responsive rule applies regardless of the chosen gap.

View code
Code
asx
<FormGroup cols="3" gap="sm">
  <Field htmlFor="category"><FieldLabel htmlFor="category">Category</FieldLabel><Input id="category" name="category" /></Field>
  <Field htmlFor="author"><FieldLabel htmlFor="author">Author</FieldLabel><Input id="author" name="author" /></Field>
  <Field htmlFor="locale"><FieldLabel htmlFor="locale">Locale</FieldLabel><Input id="locale" name="locale" /></Field>
</FormGroup>

Installation

Command
bash
cargo ax add ui
Manual setup
Cargo.toml
toml
[dependencies]
axonyx-ui = "0.0.80"
app/layout.asx
asx
use "@axonyx/ui"

FormGroup contract

Import
asx
import { FormGroup } from "@axonyx/ui/foundry/FormGroup.asx"

cols: optional String. Default is one column; 2 and 3 create multi-column groups on wider screens.

gap: optional String. Default or md uses 1rem. sm uses 0.65rem; lg uses 1.35rem.

Slot: related controls, usually Field components. FormGroup renders a div and handles layout. Wrap it in Form for submission and Fieldset with Legend for a named semantic group.

Try the complete CMS article editor