Toggle React Component

Toggle React component represents Toggle component.

Toggle Components

There are following components included:

  • Toggle

Toggle Properties

PropTypeDefaultDescription
<Toggle> properties
initbooleantrueInitializes Toggle
namestringToggle input name
valuestring
number
Toggle input value
checkedbooleanfalseDefines whether the toggle input is checked or not
disabledbooleanfalseDefines whether the toggle input is disabled or not
readonlybooleanfalseDefines whether the toggle input is readonly or not
tooltipstringtooltip text to show on hover/press
tooltipTriggerstringhoverDefines how to trigger (open) Tooltip. Can be hover, click or manual

Toggle Events

EventDescription
<Toggle> events
changeEvent 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
toggleChangeEvent will be triggered when toggle checkbox state changed

Toggle Methods

<Toggle> methods
.toggle()Toggle checkbox state

Examples

import React from 'react';
import { Page, Navbar, BlockTitle, List, ListItem, Toggle } from 'framework7-react';

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