Switch

NOTE: Introduced feature in v0.2.7.

Switch is typically used to present to the end-user features, settings, and other toggles that they can turn on / off.

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

<Form.Label for="switch-preview">
    Remember Login?
    <Switch palette="affirmative" />
</Form.Label>

Imports

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

States

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

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

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

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

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

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

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

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

Palette

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

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

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

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

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

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

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

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

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

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

    <div>
        <Text is="strong">NEGATIVE</Text>
        <br />
        <Switch 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 Switch via the sizing property.

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

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

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

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

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

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

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

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

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