Hesoyam

Toggle

Flip a single boolean. Not Switch — Switch is a 2–3 option segmented control.

Default

v-model owns the boolean. checked / @change also work if the parent already stores the flag that way.


        

          1
          
          <Toggle v-model="firewall">Password Protection</Toggle>
        

          2
          
          <Toggle v-model="protection">Auto-Cancel Builds</Toggle>

Sizes

default is 16px track, medium is 20px, large is 24px.


        

          1
          
          <Toggle aria-label="Password Protection"></Toggle>
        

          2
          
          <Toggle size="medium" aria-label="Password Protection"></Toggle>
        

          3
          
          <Toggle size="large" aria-label="Password Protection"></Toggle>

Disabled


        

          1
          
          <Toggle disabled aria-label="Password Protection"></Toggle>
        

          2
          
          <Toggle disabled :checked="true" aria-label="Password Protection"></Toggle>

Color

On-state track. blue is the default. amber and red are for caution and destructive policies.


        

          1
          
          <Toggle v-model="customColor" color="amber">
        

          2
          
            <template #icon-unchecked>
        

          3
          
              <Icon :icon="SquareUnlock02Icon" :size="8" />
        

          4
          
            </template>
        

          5
          
            <template #icon-checked>
        

          6
          
              <Icon :icon="SquareLock02Icon" :size="8" />
        

          7
          
            </template>
        

          8
          
          </Toggle>

Label

Children are the visible name. direction flips the track to the leading edge. labelCasing stays title unless the copy is already sentence case.


        

          1
          
          <Toggle v-model="firewall">Password Protection</Toggle>
        

          2
          
          <Toggle v-model="firewall" direction="switch-first">Password Protection</Toggle>

Best practices

  • Toggle is one immediate on/off. Lists of optional rows use Checkbox. Two or three mutually exclusive views use Switch.
  • Label the thing that is true when on: Password Protection, not "Enable password protection".
  • Give an accessible name with children, aria-label, or aria-labelledby. Dev mode warns if all three are missing.
  • Disable only when the flip is impossible (plan lock, policy). Say why next to the control or in a Tooltip.
  • Keep labelCasing="title" unless the surrounding sentence is already lowercase.