@purpurds/toggle
v4.4.0
Published
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
Downloads
2,303
Readme
import { Meta, Stories, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
import * as ToggleStories from "./src/toggle.stories"; import packageInfo from "./package.json";
Toggle
Version {packageInfo.version}
Showcase
Properties
Installation
Via NPM
Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"
In MyApp.tsx
import "@purpurds/purpur/styles";
Examples
In MyComponent.tsx
Controlled.
For when you have to controll and use the state of the toggle.
import { Toggle } from "@purpurds/purpur";
export const MyComponent = () => {
const [isChecked, setIsChecked] = useState(false);
return (
<div>
<Toggle
id="my-toggle"
checked={isChecked}
onChange={setIsChecked}
label="My toggle"
labelPosition="right"
/>
</div>
);
};
Uncontrolled
For when you don't have to controll state of the toggle, e.g. when in a form.
NOTE: do not use toggles instead of checkboxes or radio buttons!
import { Toggle } from "@purpurds/purpur";
export const MyComponent = () => {
/**
* Toggle will render checked, and handle it's state itself.
*
* Since it is rendered in a form, it will render a checkbox input under the hood
* that will reflect its value and state.
*/
return (
<form>
<Toggle id="my-toggle" defaultChecked label="My uncontrolled toggle" />
</form>
);
};
With custom label (not recommended).
Use the aria-labelledby
property and pass the id of the label.
import { Toggle } from "@purpurds/purpur";
export const MyComponent = () => {
return (
<div>
<label id="my-custom-label" htmlFor="my-toggle">
Custom label
</label>
<Toggle aria-labeledby="my-custom-label" id="my-toggle" {...otherProps} />
</div>
);
};
Without label (not recommended).
If there should be no label at all, use the aria-label
to label the toggle for screen readers.
import { Toggle } from "@purpurds/purpur";
export const MyComponent = () => {
return (
<div>
<Toggle aria-label="Toggle some awesome stuff!" id="my-toggle" {...otherProps} />
</div>
);
};