Ark UI

Usage

To use the Switch component in your project, import the necessary sub-components from the package:

import { Switch, SwitchControl, SwitchThumb, SwitchLabel } from '@ark-ui/react'

Here is a basic example of how to use the Switch component:

import { useState } from 'react'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/react'

const Basic = () => (
  <Switch defaultChecked>
    <SwitchControl>
      <SwitchThumb />
    </SwitchControl>
    <SwitchLabel>Label</SwitchLabel>
  </Switch>
)

import { createSignal } from 'solid-js'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/solid'

const Basic = () => (
  <Switch>
    <SwitchControl>
      <SwitchThumb />
    </SwitchControl>
    <SwitchLabel>Label</SwitchLabel>
  </Switch>
)

<script setup lang="ts">
import { ref } from 'vue'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/vue'

const checked = ref(false)
</script>

<template>
  <Switch>
    <SwitchControl>
      <SwitchThumb />
    </SwitchControl>
    <SwitchLabel>Label</SwitchLabel>
  </Switch>
</template>

Controlled Switch

For a controlled Switch component, the state of the toggle is managed using the checked prop, and updates when the onChange event handler is called:

import { useState } from 'react'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/react'

const Controlled = () => {
  const [checked, setChecked] = useState(false)
  return (
    <Switch checked={checked} onCheckedChange={(e) => setChecked(e.checked)}>
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      <SwitchLabel>Label</SwitchLabel>
    </Switch>
  )
}

import { createSignal } from 'solid-js'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/solid'

const Controlled = () => {
  const [checked, setChecked] = createSignal(false)
  return (
    <Switch checked={checked()} onCheckedChange={(e) => setChecked(e.checked)}>
      <SwitchControl>
        <SwitchThumb />
      </SwitchControl>
      <SwitchLabel>Label</SwitchLabel>
    </Switch>
  )
}

<script setup lang="ts">
import { ref } from 'vue'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/vue'

const checked = ref(false)
</script>

<template>
  <Switch v-model="checked">
    <SwitchControl>
      <SwitchThumb />
    </SwitchControl>
    <SwitchLabel>Label</SwitchLabel>
  </Switch>
</template>

Render Prop Usage

The Switch component also allows for a render prop, granting direct access to its internal state. This enables you to dynamically adjust and customize aspects of the component based on its current state:

import { useState } from 'react'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/react'

const RenderProp = () => (
  <Switch>
    {(api) => (
      <>
        <SwitchControl>
          <SwitchThumb />
        </SwitchControl>
        <SwitchLabel>Feature is {api.isChecked ? 'enabled' : 'disabled'}</SwitchLabel>
      </>
    )}
  </Switch>
)

import { createSignal } from 'solid-js'
import { Switch, SwitchControl, SwitchLabel, SwitchThumb } from '@ark-ui/solid'

const RenderProp = () => (
  <Switch>
    {(api) => (
      <>
        <SwitchControl>
          <SwitchThumb />
        </SwitchControl>
        <SwitchLabel>Feature is {api().isChecked ? 'enabled' : 'disabled'}</SwitchLabel>
      </>
    )}
  </Switch>
)

Story not available

Conclusion

The Switch component provides a straightforward, intuitive solution for incorporating toggle functionality into your applications. With its flexibility for both controlled and uncontrolled scenarios and provision for dynamic customization through its render prop, it can accommodate various use cases effectively.