BaseToggle

BaseToggle provides a configurable, base implementation of a toggle switch. BaseToggle is implemented as a button. Text included in the tag body will be used as the button text but visible only to screen readers. Toggle switches should most often be paired with an associated label but the details of that relationship are left to the developer. See AisToggle for a more branded experience.

Props

v-model

v-model will bind a boolean to the switch. When the switch is "on", the boolean value will be true. v-model uses the modelValue prop under the covers. See Vue's documentation for details.

Enabled: true

<script setup>
import {ref} from 'vue'
import {BaseToggle} from '@ais-public/ais-components'
const enabled = ref(true)
</script>

<template>
  <div class="flex gap-4 items-center">
    <BaseToggle id="toggle-549" v-model="enabled" label="BaseToggle example" />
    <label for="toggle-549" class="text-lg font-medium">Enabled: {{enabled}}</label>
  </div>
</template>

size

size controls the switch size. Accepted values are sm, md, and lg. The default value is md.

sm

md

lg

<script setup>
import {ref} from 'vue'
import {BaseToggle} from '@ais-public/ais-components'
import {AisRadioGroup} from '@ais-public/ais-components'
const enabled = ref(true)
const selectedSize = ref('md')
</script>

<template>
  <div class="grid gap-4">
    <div class="flex gap-4 items-center">
      <BaseToggle v-model="enabled" :size="selectedSize" />
    </div>
    <div>
      <AisRadioGroup v-model="selectedSize" :options="['sm', 'md', 'lg']" />
    </div>
  </div>
</template>

color

color accepts a string or object to customize the switch's colors. Colors are specified using TailwindCSS background classes, e.g. bg-ui-gold. When passed a string, the provided class will be used for the "on" state. The default value is bg-ui-gold. The default "off" value is bg-ui-gray-100. Developers are encouraged to use the default branding. Custom colors should be reserved for very limited use cases.

To specify both the "on" and "off" states, pass an object that has the keys on and off, i.e. { off: 'bg-ui-gray-100', on: 'bg-ui-gold' }.

<script setup>
import {ref} from 'vue'
import {BaseToggle} from '@ais-public/ais-components'
const enabled = ref(true)
</script>

<template>
  <BaseToggle v-model="enabled" color="bg-ui-gray-900" />
</template>

rounded

rounded controls how rounded the toggle switch appears. It takes the standard rounding values of: none, sm, md, lg, or full. The default value is sm, and we recommend only using sm and full. Developers may also pass a boolean to rounded. When true, the toggle switch will be fully rounded.

none

sm

md

lg

full

<script setup>
import {ref} from 'vue'
import {BaseToggle} from '@ais-public/ais-components'
import {AisRadioGroup} from '@ais-public/ais-components'
const enabled = ref(true)
const selectedLevel = ref('full')
</script>

<template>
  <div class="grid gap-4">
    <div>
      <BaseToggle v-model="enabled" :rounded="selectedLevel" />
    </div>
    <div>
      <AisRadioGroup v-model="selectedLevel" :options="['none', 'sm', 'md', 'lg', 'full']" />
    </div>
  </div>
</template>

disabled

The disabled prop will disable the toggle switch.

<script setup>
import {ref} from 'vue'
import {BaseToggle} from '@ais-public/ais-components'
const enabled = ref(false)
</script>

<template>
  <BaseToggle disabled v-model="enabled" />
</template>

name

If you add the name prop to a toggle, a hidden input element will be rendered and kept in sync with the switch state.

Events

update:modelValue

AisToggle uses Vue's standard v-model configuration. As a result, it will fire the @update:modelValue event whenever the toggle's value changes. Typically, v-model should be preferred, but binding the event directly may be useful in special circumstances. See Vue's documentation for details.