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
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 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>