NOTE: Introduced feature in
v0.2.7
.
Radio
is typically used to present a set of mutually-exclusive options to the end-user, which they can then choose from.
<script>
import {
Form,
Radio,
Stack,
Text,
} from "@kahi-ui/framework";
let logic_state = "vanilla";
</script>
<Text is="strong">
Select an Ice Cream Flavor
<Text is="sup">{logic_state}</Text>
</Text>
<Stack.Container spacing="small" margin_top="small">
<Form.Group
logic_name="radio-preview"
bind:logic_state
>
<Radio
id="radio-preview-bubblegum"
palette="accent"
sizing="tiny"
value="bubblegum"
>
Bubblegum
</Radio>
<Radio
id="radio-preview-chocolate"
palette="accent"
sizing="tiny"
value="chocolate"
>
Chocolate
</Radio>
<Radio
id="radio-preview-vanilla"
palette="accent"
sizing="tiny"
value="vanilla"
>
Vanilla
</Radio>
</Form.Group>
</Stack.Container>
Imports
<script>
import {Radio} from "@kahi-ui/framework";
</script>
States
You can control the state of the Radio
via the active
, disabled
, and state
properties.
<script>
import {
Radio,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<br />
<Radio />
</div>
<div>
<Text is="strong">STATE</Text>
<br />
<Radio state />
</div>
<div>
<Text is="strong">ACTIVE NO-STATE</Text>
<br />
<Radio active />
</div>
<div>
<Text is="strong">ACTIVE STATE</Text>
<br />
<Radio active state />
</div>
<div>
<Text is="strong">DISABLED NO-STATE</Text>
<br />
<Radio disabled />
</div>
<div>
<Text is="strong">DISABLED STATE</Text>
<br />
<Radio disabled state />
</div>
</Stack.Container>
Palette
You can change the color palette of the Radio
via the palette
property.
<script>
import {
Form,
Radio,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Form.Group logic_name="radio-palette">
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<br />
<Radio />
</div>
<div>
<Text is="strong">ACCENT</Text>
<br />
<Radio palette="accent" />
</div>
<div>
<Text is="strong">NEUTRAL</Text>
<br />
<Radio palette="neutral" />
</div>
<div>
<Text is="strong">DARK</Text>
<br />
<Radio palette="dark" />
</div>
<div>
<Text is="strong">LIGHT</Text>
<br />
<Radio palette="light" />
</div>
<div>
<Text is="strong">ALERT</Text>
<br />
<Radio palette="alert" />
</div>
<div>
<Text is="strong">AFFIRMATIVE</Text>
<br />
<Radio palette="affirmative" />
</div>
<div>
<Text is="strong">INFORMATIVE</Text>
<br />
<Radio palette="informative" />
</div>
<div>
<Text is="strong">NEGATIVE</Text>
<br />
<Radio palette="negative" />
</div>
</Stack.Container>
</Form.Group>
Sizing
WARNING: This feature was renamed from
size
tosizing
inv0.6.0
.
NOTE: By passing an array, you can set responsive values. e.g.
sizing={["tiny", "tablet:medium", "mobile:medium"]}
You can change the size of the Radio
via the sizing
property.
<script>
import {
Form,
Radio,
Stack,
Text,
} from "@kahi-ui/framework";
</script>
<Form.Group logic_name="radio-sizing">
<Stack.Container
orientation="horizontal"
spacing="medium"
variation="wrap"
>
<div>
<Text is="strong">DEFAULT</Text>
<br />
<Radio />
</div>
<div>
<Text is="strong">NANO</Text>
<br />
<Radio sizing="nano" />
</div>
<div>
<Text is="strong">TINY</Text>
<br />
<Radio sizing="tiny" />
</div>
<div>
<Text is="strong">SMALL</Text>
<br />
<Radio sizing="small" />
</div>
<div>
<Text is="strong">MEDIUM</Text>
<br />
<Radio sizing="medium" />
</div>
<div>
<Text is="strong">LARGE</Text>
<br />
<Radio sizing="large" />
</div>
<div>
<Text is="strong">HUGE</Text>
<br />
<Radio sizing="huge" />
</div>
<div>
<Text is="strong">MASSIVE</Text>
<br />
<Radio sizing="massive" />
</div>
</Stack.Container>
</Form.Group>
Flush
NOTE: Introduced feature in
v0.2.13
.
You can change the appearance of the Radio
to be flush with the rest of the Application content via the variation
property.
<script>
import {
Form,
Menu,
Radio,
Spacer,
} from "@kahi-ui/framework";
</script>
<Menu.Container>
<Menu.Heading>Sort By</Menu.Heading>
<Form.Group
logic_name="radio-flush"
logic_state="ascending"
>
<Menu.Label for="radio-flush-ascending">
Ascending
<Spacer />
<Radio
value="ascending"
palette="accent"
variation="flush"
/>
</Menu.Label>
<Menu.Label for="radio-flush-decending">
Decending
<Spacer />
<Radio
value="decending"
palette="accent"
variation="flush"
/>
</Menu.Label>
</Form.Group>
</Menu.Container>