🔥 Meet Our New Project: t0ggles - Your Ultimate Project Management Tool! 🔥

Toggle React Component

Toggle Components

There are following components included:

  • Toggle

Toggle Props

NameTypeDefaultDescription
checkedbooleanfalse

Defines whether the toggle input is checked or not

colorsobject

Object with Tailwind CSS colors classes

colors.bgIosstring'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'
colors.bgMaterialstring'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
colors.borderMaterialstring'border-md-light-outline dark:border-md-dark-outline'
colors.checkedBgIosstring'bg-primary'
colors.checkedBgMaterialstring'bg-md-light-primary dark:bg-md-dark-primary'
colors.checkedBorderMaterialstring'border-md-light-primary dark:border-md-dark-primary'
colors.checkedThumbBgIosstring'bg-white'
colors.checkedThumbBgMaterialstring'bg-md-light-on-primary dark:bg-md-dark-on-primary'
colors.thumbBgIosstring'bg-white'
colors.thumbBgMaterialstring'bg-md-light-outline dark:bg-md-dark-outline'
componentstring'label'

Component's HTML Element

defaultCheckedbooleanfalse

Defines whether the toggle input is checked or not, for the case if it is uncontrolled component

disabledbooleanfalse

Defines whether the toggle input is disabled or not

namestring

Toggle input name

readOnlybooleanfalse

Defines whether the toggle input is readonly or not

touchRipplebooleantrue

Enables touch ripple effect in Material theme

valueany

Toggle input value

onChangefunction(e)

Toggle input change event handler

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>
);
}
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.