Toggle React Component

Toggle Components
Toggle Props
Examples

Toggle Components

There are following components included:

Toggle

Toggle Props

Name	Type	Default	Description
checked	boolean	false	Defines whether the toggle input is checked or not
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-ios-light-surface-1-shade dark:bg-ios-dark-surface-1-tint'
colors.bgMaterial	string	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIos	string	'bg-primary'
colors.checkedBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterial	string	'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIos	string	'bg-white'
colors.checkedThumbBgMaterial	string	'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIos	string	'bg-white'
colors.thumbBgMaterial	string	'bg-md-light-outline dark:bg-md-dark-outline'
component	string	'label'	Component's HTML Element
defaultChecked	boolean	false	Defines whether the toggle input is checked or not, for the case if it is uncontrolled component
disabled	boolean	false	Defines whether the toggle input is disabled or not
name	string		Toggle input name
onChange	function(e)		Toggle input
readOnly	boolean	false	Defines whether the toggle input is readonly or not
value	any		Toggle input value

Examples

Toggle.jsx

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  List,
  ListItem,
  Toggle,
} from 'konsta/react';

export default function TogglePage() {
  const [checked1, setChecked1] = useState(true);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(true);
  const [checked4, setChecked4] = useState(true);
  return (
    <Page>
      <Navbar
        title="Toggle"
        />

      <List strong inset>
        <ListItem
          label
          title="Item 1"
          after={
            <Toggle
              component="div"
              className="-my-1"
              checked={checked1}
              onChange={() => setChecked1(!checked1)}
            />
          }
        />
        <ListItem
          label
          title="Item 2"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-red"
              checked={checked2}
              onChange={() => setChecked2(!checked2)}
            />
          }
        />
        <ListItem
          label
          title="Item 3"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-green"
              checked={checked3}
              onChange={() => setChecked3(!checked3)}
            />
          }
        />
        <ListItem
          label
          title="Item 4"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-yellow"
              checked={checked4}
              onChange={() => setChecked4(!checked4)}
            />
          }
        />
      </List>
    </Page>
  );
}

Toggle React Component

Contents

Toggle Components

Toggle Props

Examples