Agnostic

Switch

The Switch component is best used to immediately toggle a single application item's state on or off. See these guidelines on when to use a switch vs. checkbox.

Examples

Switch

Switch label on right

Usage

astro logo

React, Vue, and Svelte examples on a single playground page 🚀 💥

codesandbox logo View in CodeSandbox Stackblitz logo View in Stackblitz

react logoReact

View source
import "agnostic-react/dist/common.min.css";
import "agnostic-react/dist/esm/index.css";
import { Switch } from "agnostic-react";
export const YourComponent = () => (
  <>
    <div class="mbs12 mbe16">
      <Switch
        id={1}
        label="Switch small"
        size="small"
      />
      <Switch
        id={2}
        label="Switch default (medium)"
      />
      <Switch
        id={3}
        label="Switch large"
        size="large"
      />
      <Switch
        id={4}
        isChecked
        label="Switch large prechecked"
        size="large"
      />
      <Switch
        id={5}
        isDisabled
        label="Switch disabled"
        size="large"
      />
      <Switch
        id={6}
        isBordered
        label="Switch bordered"
      />
      <Switch
        id={7}
        isAction
        isChecked
        label="Switch action prechecked"
        size="large"
      />
      <Switch
        id={8}
        isAction
        isBordered
        label="Switch action bordered"
      />
    </div>
    <h3>Switch label on right</h3>
    <div>
      <Switch
        id={9}
        labelPosition="right"
        label="Switch label on right"
      />
    </div>
  </>
)

React: component source, storybook tests

Vue 3 logoVue 3

View source
<template>
  <section class="mbe40">
    <div class="h4 mbe32 flex items-center">
      <img
        width="24"
        height="24"
        src="/assets/Vue-icon.svg"
        alt="Vue logo"
        class="mie12"
      />Vue 3 Switch
    </div>
    <div class="h4"><code>v-model</code> test for checked: {{ switchChecked }}</div>
    <Switch
      id="31"
      v-model="switchChecked"
      label="Switch default"
    />
    <Switch
      id="32"
      size="small"
      label="Switch small"
    />
    <Switch
      id="33"
      size="large"
      label="Switch large"
    />
    <Switch
      id="34"
      is-checked
      label="Prechecked"
    />
    <Switch
      id="35"
      is-disabled
      label="Disabled"
    />
    <Switch
      id="36"
      is-bordered
      label="Bordered"
    />
    <Switch
      id="37"
      is-action
      label="Action"
    />
    <Switch
      id="38"
      is-action
      is-bordered
      label="Action bordered"
    />
    <Switch
      id="39"
      labelPosition="right"
      label="Label on right"
    />
    <div class="h4 mbs24 mbe24">Switch label on right</div>
    <Switch
      id="40"
      is-bordered
      labelPosition="right"
      label="Label on right bordered"
    />
  </section>
</template>
<script setup>
// Import AgnosticUI global common & component CSS
import "agnostic-vue/dist/common.min.css";
import "agnostic-vue/dist/index.css";
import { ref } from "vue";
import { Switch } from "agnostic-vue";
const switchChecked = ref(false);
</script>

Vue 3: component source, storybook tests

Svelte logoSvelte

View source
<script>
  import 'agnostic-svelte/css/common.min.css';
  import { Switch } from "agnostic-svelte";
</script>
<section>
  <h2>Switch</h2>
  <div><code>bind:isChecked</code> test: {checkedValue}</div>
  <Switch id="switch-1" label="Switch—use bind:isChecked" bind:isChecked={checkedValue} />
  <Switch id="1" label="Switch default" />
  <Switch id="2" size="small" label="Switch small" />
  <Switch id="3" size="large" label="Switch large" />
  <Switch id="4" isChecked={true} label="Prechecked" />
  <Switch id="5" isDisabled={true} label="Disabled" />
  <Switch id="6" isBordered={true} label="Bordered" />
  <Switch id="7" isAction={true} label="Action" />
  <Switch
    id="8"
    isAction={true}
    isBordered={true}
    label="Action bordered"
  />
  <Switch
    id="9"
    labelPosition="right"
    label="Label on right"
  />
  <Switch
    id="10"
    isBordered={true}
    labelPosition="right"
    label="Label on right bordered"
  />
</section>

Svelte: component source, storybook tests

Angular logoAngular (Experimental)

View source

In your Angular configuration (likely angular.json) ensure you're including the common AgnosticUI styles:

"styles": ["agnostic-angular/common.min.css"],

Add AgnosticUI's AgModule module:



 





 





import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AgModule } from 'agnostic-angular';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [BrowserModule, AgModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Now you can use in your components:

import { Component } from '@angular/core';

@Component({
  selector: 'your-component',
  template: `<section>
    <h3>Switch</h3>
    <ag-switch label="Switch small"
               size="small"></ag-switch>
    <ag-switch label="Switch default (medium)"></ag-switch>
    <ag-switch label="Switch large"
               size="large"></ag-switch>
    <ag-switch [isChecked]="true"
               label="Switch prechecked"></ag-switch>
    <ag-switch [isDisabled]="true"
               label="Switch disabled"></ag-switch>
    <ag-switch [isBordered]="true"
               label="Switch bordered"></ag-switch>
    <ag-switch [isAction]="true"
               [isChecked]="true"
               label="Switch action prechecked"></ag-switch>
    <ag-switch [isAction]="true"
               [isBordered]="true"
               label="Switch action bordered"></ag-switch>
    <h3 class="mbs24 mbe24">Switch label on right</h3>
    <ag-switch label="Small label on right"
               size="small"
               labelPosition="right"></ag-switch>
  </section>`
})
export class YourComponent {}

Angular: component source, storybook tests

Storybook

You can run the framework Storybooks and see live examples for React, Vue 3, Svelte, Astro, and Angular (experimental). The following will set up Storybook and run locally:

How to run Storybook
git clone git@github.com:AgnosticUI/agnosticui.git
cd agnosticui/<PACKAGE_NAME> && npm i # e.g. cd agnosticui/agnostic-react && npm i
npm run storybook

See Running Storybook.