Get Started
React Components
- App
- Accordion
- Action Sheet / Actions
- Badge
- Block / Content Block
- Button
- Cards
- Checkbox
- Chips / Tags
- Contacts List
- Floating Action Button / FAB
- Gauge
- Grid / Layout Grid
- Icon
- Inputs / Form Inputs
- Link
- List View
- List Item
- List Button
- List Index
- Login Screen
- Messagebar
- Messages
- Navbar
- Page
- Panel / Side Panels
- Photo Browser
- Popover
- Popup
- Preloader
- Progressbar
- Radio
- Range Slider
- Searchbar
- Sheet Modal
- Smart Select
- Sortable
- Statusbar
- Stepper
- Subnavbar
- Swiper
- Swipeout
- Tabs
- Toggle
- Toolbar / Tabbar
- View
- Virtual List

Toggle React Component

Toggle React component represents Toggle component.

Toggle Components

There are following components included:

Toggle / F7Toggle

Toggle Properties

Prop	Type	Default	Description
<Toggle> properties
init	boolean	true	Initializes Toggle
name	string		Toggle input name
value	string number		Toggle input value
checked	boolean	false	Defines whether the toggle input is checked or not
disabled	boolean	false	Defines whether the toggle input is disabled or not
readonly	boolean	false	Defines whether the toggle input is readonly or not

Toggle Events

Event	Description
<Toggle> events
change	Event will be triggered when toggle checkbox state changed. This event may not occur on touch devices, so it is better to use next `toggle:change` event instead
toggleChange	Event will be triggered when toggle checkbox state changed

Toggle Methods

Event	Description
<Toggle> methods
.toggle()	Toggle checkbox state

Examples

<BlockTitle>Super Heroes</BlockTitle>
<List simpleList>
  <ListItem>
    <span>Batman</span>
    <Toggle defaultChecked />
  </ListItem>
  <ListItem>
    <span>Aquaman</span>
    <Toggle defaultChecked color="blue" />
  </ListItem>
  <ListItem>
    <span>Superman</span>
    <Toggle defaultChecked color="red" />
  </ListItem>
  <ListItem>
    <span>Hulk</span>
    <Toggle color="green" />
  </ListItem>
  <ListItem>
    <span>Spiderman (Disabled)</span>
    <Toggle disabled />
  </ListItem>
  <ListItem>
    <span>Ironman (Disabled)</span>
    <Toggle defaultChecked disabled />
  </ListItem>
  <ListItem>
    <span>Thor</span>
    <Toggle defaultChecked color="orange" />
  </ListItem>
  <ListItem>
    <span>Wonder Woman</span>
    <Toggle color="pink" />
  </ListItem>
</List>