4.1.3 • Published 2 years ago
react-toggle v4.1.3
An elegant, accessible toggle component for React. Also a glorified checkbox.
See usage and examples.
Props
The component takes the following props.
| Prop | Type | Description |
|---|---|---|
checked | boolean | If true, the toggle is checked. If false, the toggle is unchecked. Use this if you want to treat the toggle as a controlled component |
defaultChecked | boolean | If true on initial render, the toggle is checked. If false on initial render, the toggle is unchecked. Use this if you want to treat the toggle as an uncontrolled component |
onChange | function | Callback function to invoke when the user clicks on the toggle. The function signature should be the following: function(e) { }. To get the current checked status from the event, use e.target.checked. |
onFocus | function | Callback function to invoke when field has focus. The function signature should be the following: function(e) { } |
onBlur | function | Callback function to invoke when field loses focus. The function signature should be the following: function(e) { } |
name | string | The value of the name attribute of the wrapped \<input> element |
value | string | The value of the value attribute of the wrapped \<input> element |
id | string | The value of the id attribute of the wrapped \<input> element |
icons | object | If false, no icons are displayed. You may also pass custom icon components in icons={{checked: <CheckedIcon />, unchecked: <UncheckedIcon />}} |
aria-labelledby | string | The value of the aria-labelledby attribute of the wrapped \<input> element |
aria-label | string | The value of the aria-label attribute of the wrapped \<input> element |
disabled | boolean | If true, the toggle is disabled. If false, the toggle is enabled |
Installation
npm install react-toggleUsage
If you want the default styling, include the component's CSS with
import "react-toggle/style.css" // for ES6 modules
// or
require("react-toggle/style.css") // for CommonJSDevelopment
npm install
npm run devBuild
npm run buildLicense
MIT
4.1.3
2 years ago
4.1.2
3 years ago
4.1.1
5 years ago
4.1.0
5 years ago
4.0.2
7 years ago
4.0.1
7 years ago
3.0.1
7 years ago
3.0.0
7 years ago
2.2.1
7 years ago
2.2.0
7 years ago
2.1.1
8 years ago
2.1.0
8 years ago
2.0.1
9 years ago
2.0.0
9 years ago
1.2.3
9 years ago
1.2.2
9 years ago
1.2.1
9 years ago
1.2.0
9 years ago
1.1.0
9 years ago
1.0.3
9 years ago
1.0.2
9 years ago
1.0.1
9 years ago
1.0.0
9 years ago
0.1.6
9 years ago
0.1.5
9 years ago
0.1.4
9 years ago
0.1.3
9 years ago
0.1.2
9 years ago
0.1.1
9 years ago
0.1.0
9 years ago
0.0.8
9 years ago
0.0.7
9 years ago
0.0.6
9 years ago
0.0.5
9 years ago
0.0.4
9 years ago
0.0.3
9 years ago
0.0.2
9 years ago
0.0.1
9 years ago
0.0.0
9 years ago