
Security News
GitHub Actions Supply Chain Attack Puts Thousands of Projects at Risk
A compromised GitHub Action exposed secrets in CI/CD logs, putting thousands of projects at risk and forcing developers to urgently secure their workflows.
@purpurds/checkbox
Advanced tools
import { Meta, ArgTypes, Primary, Subtitle } from "@storybook/blocks";
import * as CheckboxStories from "./src/checkbox.stories"; import packageInfo from "./package.json";
Version {packageInfo.version}
Add the dependency to your consumer app like "@purpurds/purpur": "^x.y.z"
In MyApp.tsx
import "@purpurds/purpur/styles";
In MyComponent.tsx
For when you have to controll and use the state of the checkbox.
import { Checkbox } from "@purpurds/purpur";
export const MyComponent = () => {
const [checked, setChecked] = useState(false);
return (
<div>
<Checkbox
id="my-checkbox"
checked={checked}
onChange={setChecked}
label="My checkbox"
labelPosition="right"
/>
</div>
);
};
When using the Indeterminate state, the toggle must be controlled.
import { Checkbox } from "@purpurds/purpur";
export const MyComponent = () => {
const [checked, setChecked] = useState(false);
return (
<div>
<Checkbox
id="my-checkbox"
checked={checked}
onChange={setChecked}
label="My checkbox"
labelPosition="right"
/>
<Button
variant="primary"
onClick={() =>
setChecked((prevChecked) => (prevChecked === "indeterminate" ? false : "indeterminate"))
}
>
Toggle indeterminate
</Button>
</div>
);
};
For when you don't have to controll state of the checkbox, e.g. when in a form.
import { Checkbox } from "@purpurds/purpur";
export const MyComponent = () => {
/**
* The checkbox 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 reflects its value and state.
*/
return (
<form>
<Checkbox id="my-checkbox" defaultChecked label="My uncontrolled checkbox" />
</form>
);
};
Use the aria-labelledby
property and pass the id of the label.
import { Checkbox } from "@purpurds/purpur";
export const MyComponent = () => {
return (
<div>
<label id="my-custom-label" htmlFor="my-checkbox">
Custom label
</label>
<Checkbox aria-labeledby="my-custom-label" id="my-checkbox" {...otherProps} />
</div>
);
};
If there should be no label at all, use the aria-label
to label the checkbox for screen readers.
import { Checkbox } from "@purpurds/purpur";
export const MyComponent = () => {
return (
<div>
<Checkbox aria-label="checkbox some awesome stuff!" id="my-checkbox" {...otherProps} />
</div>
);
};
FAQs
Unknown package
The npm package @purpurds/checkbox receives a total of 1,524 weekly downloads. As such, @purpurds/checkbox popularity was classified as popular.
We found that @purpurds/checkbox demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A compromised GitHub Action exposed secrets in CI/CD logs, putting thousands of projects at risk and forcing developers to urgently secure their workflows.
Research
Security News
A malicious Maven package typosquatting a popular library is secretly stealing OAuth credentials on the 15th of each month, putting Java developers at risk.
Security News
Socket and Seal Security collaborate to fix a critical npm overrides bug, resolving a three-year security issue in the JavaScript ecosystem's most popular package manager.