Forms
Checkbox
Simple, native choices with a generous clickable label.
Use it in your project
Install oscl-ui from npm and import oscl-ui/styles.css once. See installation.
checkbox-example.tsx
import { Checkbox } from "oscl-ui";
<Checkbox label="Keep me in the loop" defaultChecked />Accessibility
Keep visible labels and keyboard focus. Supply an accessible name to icon-only actions. Try this preview with Tab, Enter, Space, and Escape where appropriate.
The source, in full
This is the actual source from the isolated OSCL package used by this website. Native props and TypeScript declarations are included in the npm package.
checkbox.tsx
"use client";
import { forwardRef, useId } from "react";
import type { InputHTMLAttributes, ReactNode } from "react";
export interface CheckboxProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
label: ReactNode;
description?: string;
}
export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(function Checkbox(
{ label, description, id, className = "", "aria-describedby": describedBy, ...props }, ref,
) {
const generatedId = useId();
const fieldId = id || generatedId;
return <div className={`oscl-choice ${className}`}>
<input {...props} ref={ref} type="checkbox" id={fieldId} className="oscl-checkbox"
aria-describedby={[describedBy, description && `${fieldId}-description`].filter(Boolean).join(" ") || undefined} />
<div><label htmlFor={fieldId} className="oscl-label">{label}</label>
{description && <p className="oscl-description" id={`${fieldId}-description`}>{description}</p>}</div>
</div>;
});