@leafygreen-ui/toggle
LeafyGreen UI Kit Toggle
Last updated 15 days ago by brookescarlett .
Apache-2.0 · Original npm · Tarball · package.json
$ cnpm install @leafygreen-ui/toggle 
SYNC missed versions from official npm registry.

Toggle

npm (scoped)

View on Storybook

Installation

Yarn

yarn add @leafygreen-ui/toggle

NPM

npm install @leafygreen-ui/toggle

Example

import Toggle from '@leafygreen-ui/toggle';

<label id="label" htmlFor="toggle">Change setting</label>

<Toggle
  id="toggle"
  aria-labelledby="label"
  onChange={(checked, event) => { /* Handle the change event */ }}
/>;

Output HTML

<label for="toggle" id="label" class="leafygreen-ui-r8mbam"
  >Change setting</label
>

<div class="leafygreen-ui-19odf8z">
  <button
    id="toggle"
    aria-labelledby="label"
    role="switch"
    aria-checked="false"
    aria-disabled="false"
    class="leafygreen-ui-1vdkpyx"
    data-leafygreen-ui="toggle-button"
  >
    <span aria-hidden="true" class="leafygreen-ui-u8d1r2">On</span>
    <span aria-hidden="true" class="leafygreen-ui-1eonihm">Off</span>
    <div class="leafygreen-ui-uyx43a"></div>
  </button>

  <div data-leafygreen-ui="interaction-ring" class="leafygreen-ui-igvj0l"></div>
</div>

Properties

Prop Type Description Default
darkMode boolean Determines if the Toggle will render the dark mode styles. false
size 'default', 'small', 'xsmall' Sets the size of the toggle. 'default'
checked boolean Set's the checked state of the Toggle.
disabled boolean Disables the Toggle. false
onChange (checked, MouseEvent) => void onChange fires when the checked state of the component is being updated. Receives the updated checked state of the toggle as its first argument, and the associated mouse event as the second.
className string Adds a className to the outermost element. ''
... HTML button attributes Any supported HTML button properties will be applied to the button element.

Accessibility

For the Toggle to be accessible to screen readers, you must pass either aria-label or aria-labelledby to Toggle. Please note, if this is a part of a form, this is in addition to using htmlFor to associate a label with the Toggle. You will see TypeScript and console errors if this isn't done.

Please reach out if you would like further guidance on how to programmatically associate text with the Toggle component.

Current Tags

  • 7.0.0                                ...           latest (15 days ago)

28 Versions

  • 7.0.0                                ...           15 days ago
  • 6.0.0                                ...           2 months ago
  • 5.0.2                                ...           2 months ago
  • 5.0.1                                ...           3 months ago
  • 5.0.0                                ...           3 months ago
  • 4.1.1                                ...           4 months ago
  • 4.1.0                                ...           4 months ago
  • 4.0.0                                ...           4 months ago
  • 3.0.4                                ...           5 months ago
  • 3.0.3                                ...           5 months ago
  • 3.0.2                                ...           6 months ago
  • 3.0.1                                ...           9 months ago
  • 3.0.0                                ...           a year ago
  • 2.1.8                                ...           a year ago
  • 2.1.7                                ...           a year ago
  • 2.1.6                                ...           a year ago
  • 2.1.5                                ...           a year ago
  • 2.1.4                                ...           a year ago
  • 2.1.3                                ...           a year ago
  • 2.1.2                                ...           2 years ago
  • 2.1.1                                ...           2 years ago
  • 2.1.0                                ...           2 years ago
  • 2.0.4                                ...           2 years ago
  • 2.0.3                                ...           2 years ago
  • 2.0.2                                ...           2 years ago
  • 2.0.1                                ...           2 years ago
  • 2.0.0                                ...           2 years ago
  • 1.1.2                                ...           2 years ago
Downloads
Today 0
This Week 0
This Month 11
Last Day 0
Last Week 0
Last Month 52
Dev Dependencies (0)
None

Copyright 2014 - 2017 © taobao.org |