Axonyx UI

Forms

Forms

Native form composition for settings and CMS editors: semantic groups, responsive fields, labels, hints, and validation messages.

Try the CMS editor

Start with Form for native submission, add Fieldset and Legend for named groups, then use FormGroup to arrange related Field controls.

Form and CMS editorFormGroupFieldset and LegendField

Project settings

A required text field, select, and checkbox inside a responsive group. This demo previews settings with a GET request and does not persist changes.

Project settings

Required for the project.

Submitted values appear in the URL. This example resets after navigation.

View code
Code
asx
<Form method="get" action="/components/forms#project-settings">
  <Fieldset surface="forged">
    <Legend>Project settings</Legend>
    <FormGroup cols="2" gap="lg">
      <Field htmlFor="project-name">
        <FieldLabel htmlFor="project-name">Project name</FieldLabel>
        <Input id="project-name" name="project_name" required="true" describedBy="project-name-hint" />
        <FieldHint id="project-name-hint">Required for the project.</FieldHint>
      </Field>
      <Field htmlFor="template">
        <FieldLabel htmlFor="template">Template</FieldLabel>
        <Select id="template" name="template"><Option value="docs">Docs</Option><Option value="site">Site</Option></Select>
      </Field>
    </FormGroup>
    <Checkbox name="public_docs" checked="true">Publish docs publicly</Checkbox>
    <Button type="submit">Preview settings</Button>
    <Button type="reset">Reset</Button>
  </Fieldset>
</Form>

Server error presentation

A static example of an error returned by a save action. The server decides when to show this state; invalid styles and aria-invalid do not perform validation themselves.

This slug is already used. Choose another one.

View code
Code
asx
<Field state="error" htmlFor="slug">
  <FieldLabel htmlFor="slug">Slug</FieldLabel>
  <Input id="slug" name="slug" value="release-notes" invalid="true" describedBy="slug-error" />
  <FieldError id="slug-error">This slug is already used. Choose another one.</FieldError>
</Field>

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"

Form composition contract

Match FieldLabel htmlFor with the control id. Point describedBy to a FieldHint or FieldError id. Put names on controls so the browser includes their values in form data.

Use required="true" for browser required-field validation. Disabled controls do not submit a value; unchecked checkboxes are omitted. Use a server action to normalize and validate the submitted data.

For a real CMS save, use a POST action with server validation and authorization. The GET demos here demonstrate native submission using public sample content.