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. | | 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 | | 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 enabled. If false, the toggle is disabled |

Installation

npm install treactr-toggle

Include the component's CSS.

Development

npm install
npm run dev

Build

npm run build

License

MIT