Axonyx UI

Forms

Checkbox

Native multi-select control for settings, filters, permissions, and consent.

Next: Radio

Independent settings

Click a label or focus a checkbox and press Space. Reset restores the initial checked values, even without JavaScript.

Deploy settings

Checked enabled controls send name=on. Unchecked and disabled controls are omitted. This GET demo shows only public sample values in the URL; nothing is saved.

View code
Code
asx
<Form method="get" action="/components/checkbox#checkbox-settings">
  <Fieldset surface="forged">
    <Legend>Deploy settings</Legend>
    <Checkbox name="deploy_preview" checked="false" disabled="false">Create a deploy preview</Checkbox>
    <Checkbox name="run_checks" checked="true">Run Foundry checks</Checkbox>
    <Checkbox name="notify_team" checked="true" disabled="true">Notify the project team (unavailable)</Checkbox>
  </Fieldset>
  <Button type="submit">Preview settings</Button>
  <Button type="reset">Reset settings</Button>
</Form>

Multiple choices

Checkboxes do not form an exclusive group. Use distinct names for independent boolean settings.

Visible dashboard panels
View code
Code
asx
<Fieldset>
  <Legend>Visible dashboard panels</Legend>
  <Stack gap="md">
    <Checkbox name="show_activity" checked="true">Activity</Checkbox>
    <Checkbox name="show_metrics" checked="true">Metrics</Checkbox>
    <Checkbox name="show_drafts">Drafts</Checkbox>
  </Stack>
</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"

Checkbox contract

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

name: String, default empty. Use a non-empty name to include a checked control in a form. The content slot supplies its native label.

checked and disabled: String flags, default empty. Only "true" emits the native attribute; empty and "false" omit it.

checked defines the initial and reset state, not a controlled client binding. The browser owns subsequent toggles; no package JavaScript is needed.

The current component does not expose value, required, invalid, or indeterminate props. Its submitted value is the native default "on". Use a native input when those additional attributes are needed.

Validate permissions and consent on the server. Disabled controls are a UI affordance, not authorization; a caller can forge any request.

Compose controls in a Form