Check

NOTE: Introduced feature in v0.2.7.

Check is typically used to present a set of options to the end-user, which they can then choose from.

<script>
    import {
        Check,
        Form,
        Stack,
        Text,
    } from "@kahi-ui/framework";

    let logic_state = ["cheese", "onion"];
</script>

<Text is="strong">
    Select Pizza Toppings
    <Text is="sup">{logic_state}</Text>
</Text>

<Stack.Container
    orientation="horizontal"
    spacing="small"
    variation="wrap"
    margin_top="small"
>
    <Form.Group name="check-preview" bind:logic_state>
        <Check
            id="check-preview-cheese"
            palette="accent"
            sizing="tiny"
            value="cheese"
        >
            Cheese
        </Check>

        <Check
            id="check-preview-pepperoni"
            palette="accent"
            sizing="tiny"
            value="pepperoni"
        >
            Pepperoni
        </Check>

        <Check
            id="check-preview-onion"
            palette="accent"
            sizing="tiny"
            value="onion"
        >
            Onion
        </Check>

        <Check
            id="check-preview-pineapple"
            palette="accent"
            sizing="tiny"
            value="pineapple"
        >
            Pineapple
        </Check>
    </Form.Group>
</Stack.Container>

Imports

<script>
    import {Check} from "@kahi-ui/framework";
</script>

States

You can control the state of the Check via the active, disabled, and state properties.

<script>
    import {
        Check,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <br />
        <Check />
    </div>

    <div>
        <Text is="strong">STATE</Text>
        <br />
        <Check state />
    </div>

    <div>
        <Text is="strong">ACTIVE NO-STATE</Text>
        <br />
        <Check active />
    </div>

    <div>
        <Text is="strong">ACTIVE STATE</Text>
        <br />
        <Check active state />
    </div>

    <div>
        <Text is="strong">DISABLED NO-STATE</Text>
        <br />
        <Check disabled />
    </div>

    <div>
        <Text is="strong">DISABLED STATE</Text>
        <br />
        <Check disabled state />
    </div>
</Stack.Container>

Palette

You can change the color palette of the Check via the palette property.

<script>
    import {
        Check,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <br />
        <Check />
    </div>

    <div>
        <Text is="strong">ACCENT</Text>
        <br />
        <Check palette="accent" />
    </div>

    <div>
        <Text is="strong">NEUTRAL</Text>
        <br />
        <Check palette="neutral" />
    </div>

    <div>
        <Text is="strong">DARK</Text>
        <br />
        <Check palette="dark" />
    </div>

    <div>
        <Text is="strong">LIGHT</Text>
        <br />
        <Check palette="light" />
    </div>

    <div>
        <Text is="strong">ALERT</Text>
        <br />
        <Check palette="alert" />
    </div>

    <div>
        <Text is="strong">AFFIRMATIVE</Text>
        <br />
        <Check palette="affirmative" />
    </div>

    <div>
        <Text is="strong">INFORMATIVE</Text>
        <br />
        <Check palette="informative" />
    </div>

    <div>
        <Text is="strong">NEGATIVE</Text>
        <br />
        <Check palette="negative" />
    </div>
</Stack.Container>

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 Check via the sizing property.

<script>
    import {
        Check,
        Stack,
        Text,
    } from "@kahi-ui/framework";
</script>

<Stack.Container
    orientation="horizontal"
    spacing="medium"
    variation="wrap"
>
    <div>
        <Text is="strong">DEFAULT</Text>
        <br />
        <Check />
    </div>

    <div>
        <Text is="strong">NANO</Text>
        <br />
        <Check sizing="nano" />
    </div>

    <div>
        <Text is="strong">TINY</Text>
        <br />
        <Check sizing="tiny" />
    </div>

    <div>
        <Text is="strong">SMALL</Text>
        <br />
        <Check sizing="small" />
    </div>

    <div>
        <Text is="strong">MEDIUM</Text>
        <br />
        <Check sizing="medium" />
    </div>

    <div>
        <Text is="strong">LARGE</Text>
        <br />
        <Check sizing="large" />
    </div>

    <div>
        <Text is="strong">HUGE</Text>
        <br />
        <Check sizing="huge" />
    </div>

    <div>
        <Text is="strong">MASSIVE</Text>
        <br />
        <Check sizing="massive" />
    </div>
</Stack.Container>

Flush

NOTE: Introduced feature in v0.2.13.

You can change the appearance of the Check to be flush with the rest of the Application content via the variation property.

<script>
    import {
        Check,
        Menu,
        Spacer,
    } from "@kahi-ui/framework";
</script>

<Menu.Container>
    <Menu.Heading>Filter</Menu.Heading>

    <Menu.Label for="check-flush-cpus">
        CPUs
        <Spacer />
        <Check
            value="cpus"
            palette="accent"
            variation="flush"
        />
    </Menu.Label>

    <Menu.Label for="check-flush-hard-drives">
        Hard Drives
        <Spacer />
        <Check
            value="hard-drives"
            palette="accent"
            variation="flush"
            state
        />
    </Menu.Label>

    <Menu.Label for="check-flush-solid-state-drives">
        Solid State Drives
        <Spacer />
        <Check
            value="solid-state-drives"
            palette="accent"
            variation="flush"
        />
    </Menu.Label>
</Menu.Container>