Components V0

Field

A form shell for labels, inputs, hints, and validation states across static forms and Axonyx actions.

Project name

Use a short public name.

Email is required before submitting.

View code

<ContentGrid cols={2} gap="lg">
  <Field htmlFor="project-name">
    <FieldLabel htmlFor="project-name">Project name</FieldLabel>
    <Input id="project-name" name="project" placeholder="Blockbit CMS" describedBy="project-name-hint" />
    <FieldHint id="project-name-hint">Use a short public name.</FieldHint>
  </Field>
  <Field state="error" htmlFor="email">
    <FieldLabel htmlFor="email">Email</FieldLabel>
    <Input id="email" name="email" type="email" placeholder="you@company.dev" invalid="true" describedBy="email-error" />
    <FieldError id="email-error">Email is required before submitting.</FieldError>
  </Field>
</ContentGrid>

Installation

cargo ax add ui

Manual setup

[dependencies]
axonyx-ui = "0.0.80"

use "@axonyx/ui"

Composition contract

Field accepts state and htmlFor; compose FieldLabel, Input, FieldHint, and FieldError inside it. Match FieldLabel htmlFor to Input id, and match Input describedBy to the hint or error id.

Set invalid on Input when showing an error. Field displays the state; it does not validate or submit a form by itself.

import { ContentGrid } from "@axonyx/ui/foundry/ContentGrid.asx"
import { Field } from "@axonyx/ui/foundry/Field.asx"
import { FieldLabel } from "@axonyx/ui/foundry/FieldLabel.asx"
import { FieldHint } from "@axonyx/ui/foundry/FieldHint.asx"
import { FieldError } from "@axonyx/ui/foundry/FieldError.asx"
import { Input } from "@axonyx/ui/foundry/Input.asx"