Radio

View Source

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 to sizing in v0.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>

Properties

Radio

Name Description Types
palette Alters the displayed color scheme.
auto inverse inherit accent neutral off dark light alert affirmative informative negative
sizing Renders the Radio at a different sizes.
nano tiny small medium large huge massive {VIEWPORT}:{SIZING}
variation Alters the appearance of the Radio.
flush
active Renders the Radio with aria-pressed attribute, and styles the Radio as if it where being clicked.
boolean
disabled Renders the Radio with disabled attribute, and styles the Radio partially transparent.
boolean
name Sets the form name of the Radio.
string
state Sets the checked state of the Radio.
boolean
value Sets the value sent whenever the parent
is submitted.
string

Events

Radio

Name Description Types
change Fires whenever the Radio has its value changed.
InputEvent
input Fires whenever the Radio has its value changed.
InputEvent

Slots

Radio

Name Description Types
default Default unnamed slot. Renders the Radio inside a
{}