Axonyx UI

Forms

Radio

Native radio option for plans, settings, templates, and mutually exclusive choices.

Next: Rating

One template per project

Share a name to create an exclusive group. Docs is selected initially. Arrow keys skip the disabled option; reset restores Docs.

Template

This GET preview sends only the selected template value in the URL. Nothing is saved.

View code
Code
asx
<Form method="get" action="/components/radio#radio-settings">
  <Fieldset surface="forged">
    <Legend>Template</Legend>
    <Radio name="template" value="site" checked="false" disabled="false">Site</Radio>
    <Radio name="template" value="docs" checked="true">Docs</Radio>
    <Radio name="template" value="portfolio" disabled="true">Portfolio (unavailable)</Radio>
    <Radio name="template" value="blog">Blog</Radio>
  </Fieldset>
  <Button type="submit">Preview template</Button>
  <Button type="reset">Reset template</Button>
</Form>

Independent groups

Different names keep unrelated choices separate. Fieldset and Legend give each group an accessible name.

Density
Navigation position
View code
Code
asx
<Fieldset>
  <Legend>Density</Legend>
  <Radio name="density" value="comfortable" checked="true">Comfortable</Radio>
  <Radio name="density" value="compact">Compact</Radio>
</Fieldset>
<Fieldset>
  <Legend>Navigation position</Legend>
  <Radio name="navigation" value="left" checked="true">Left</Radio>
  <Radio name="navigation" value="top">Top</Radio>
</Fieldset>

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"

Radio contract

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

name and value: String, default empty. Radios with the same name in the same form are exclusive. Only the checked enabled radio submits its name and value.

checked and disabled: String flags, default empty. Only "true" emits the native attribute; empty and "false" omit it. Set checked on one option per group for a deterministic initial and reset choice.

The content slot supplies a native label. Use Fieldset and Legend for the group. Tab enters the group, Space selects the focused radio, and arrow keys move between enabled choices.

Selection, keyboard navigation, reset, and submission work without JavaScript. The current Radio component does not expose required or invalid props.

Validate values against an allowed list on the server. Disabling an option does not prevent a forged request from submitting that value.

Use Checkbox for independent choices