Axonyx UI

Forms

Select

Native select control with Foundry sizing, accessible field labels, required validation, and real selected and disabled option flags.

Next: Slider

Theme choice

Use the forged surface for a focused selector. Choosing a value here demonstrates the control; it does not change the site palette.

Native select, Foundry styled.

View code
Code
asx
<Select name="theme" surface="forged">
  <Option value="silver">Silver</Option>
  <Option value="bronze">Bronze</Option>
  <Option value="gold">Gold</Option>
</Select>

Selection and reset

Start from a non-first option, try the arrow keys, and reset after changing the value. Disabled options remain unavailable with JavaScript switched off.

Published is selected initially. Arrow keys skip Archived; reset restores Published.

This GET preview returns to the same page with the selected status in the URL. Nothing is saved.

View code
Code
asx
<Form method="get" action="/components/select#option-form">
  <Field htmlFor="publication-status">
    <FieldLabel htmlFor="publication-status">Publication status</FieldLabel>
    <Select id="publication-status" name="status" describedBy="publication-status-hint">
      <Option value="draft" selected="false" disabled="false">Draft</Option>
      <Option value="published" selected="true">Published</Option>
      <Option value="archived" disabled="true">Archived (unavailable)</Option>
      <Option value="scheduled">Scheduled</Option>
    </Select>
    <FieldHint id="publication-status-hint">Published is selected initially. Arrow keys skip Archived; reset restores Published.</FieldHint>
  </Field>
  <Flex gap="sm" wrap="true">
    <Button type="submit" variant="primary">Preview selection</Button>
    <Button type="reset" variant="ghost">Reset selection</Button>
  </Flex>
  <Copy>This GET preview returns to the same page with the selected status in the URL. Nothing is saved.</Copy>
</Form>

Required and disabled controls

Use a selected, disabled placeholder for a required choice. A disabled select can show a server-assigned value without submitting it.

Choose a category before submitting. The empty placeholder does not satisfy required validation.

A disabled select is excluded from form submission.

View code
Code
asx
<Form method="get" action="/components/select#required-select-preview">
  <Field htmlFor="select-category">
    <FieldLabel htmlFor="select-category">Category</FieldLabel>
    <Select id="select-category" name="category" required="true" describedBy="select-category-hint">
      <Option value="" selected="true" disabled="true">Choose a category</Option>
      <Option value="news">News</Option>
      <Option value="guides">Guides</Option>
    </Select>
    <FieldHint id="select-category-hint">Choose a category before submitting. The empty placeholder does not satisfy required validation.</FieldHint>
  </Field>
  <Field htmlFor="select-locale">
    <FieldLabel htmlFor="select-locale">Locale</FieldLabel>
    <Select id="select-locale" name="locale" disabled="true">
      <Option value="en">English (assigned by the server)</Option>
    </Select>
    <FieldHint>A disabled select is excluded from form submission.</FieldHint>
  </Field>
  <Button type="submit" variant="primary">Preview category</Button>
</Form>

Error presentation

An example of a server-rejected value. aria-invalid and the linked message describe the error; validation belongs in the server action.

Publishing is unavailable for this record.

View code
Code
asx
<Field state="error" htmlFor="status">
  <FieldLabel htmlFor="status">Status</FieldLabel>
  <Select id="status" name="status" invalid="true" describedBy="status-error">
    <Option value="published">Published</Option>
  </Select>
  <FieldError id="status-error">Publishing is unavailable for this record.</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"

Select and Option contract

Imports
asx
import { Select } from "@axonyx/ui/foundry/Select.asx"
import { Option } from "@axonyx/ui/foundry/Option.asx"

Select id/name: identify and submit the control. Match id to FieldLabel htmlFor and describedBy to a hint or error message ID.

Select size: optional String, sm or lg. surface: optional String, forged. disabled, required, and invalid use the String flag "true".

Option value: String, default empty. The value sent by the form. Its content slot supplies the visible label.

Option selected and disabled: String flags, default empty. Set "true" to emit the native boolean attribute. Empty or "false" leaves that attribute absent.

Use selected on one option to set the initial selection and reset target. The browser owns subsequent selection changes. Use a disabled empty option as a placeholder for a required select.

Native selection, keyboard navigation, reset, and submission work without package JavaScript. Server actions must still validate submitted values against their allowed list.

Use Select in the CMS article editor