@stratakit/bricks
Version:
Small, modular components for StrataKit
32 lines (31 loc) • 1.48 kB
TypeScript
import type { CheckboxProps as AkCheckboxProps } from "@ariakit/react/checkbox";
import type { FocusableProps } from "@stratakit/foundations/secret-internals";
type InputBaseProps = Omit<FocusableProps<"input">, "defaultValue" | "checked" | "defaultChecked">;
type CheckboxOwnProps = Pick<AkCheckboxProps, "value" | "defaultChecked" | "checked" | "onChange">;
interface CheckboxProps extends InputBaseProps, CheckboxOwnProps {
}
/**
* A styled checkbox element, typically used for selecting one or more options from a list.
*
* Use with the `Field` components to automatically handle ID associations for
* labels and descriptions:
* ```tsx
* <Field.Root>
* <Field.Label>Check me</Field.Label>
* <Field.Control render={<Checkbox />} />
* </Field.Root>
* ```
*
* Without the `Field` components you will need to manually associate labels,
* descriptions, etc.:
* ```tsx
* <Checkbox id="newsletter" name="newsletter" aria-describedby="newsletter-description" />
* <Label htmlFor="newsletter">Sign me up for the newsletter.</Label>
* <Description id="newsletter-description">No spam, we promise.</Description>
* ```
*
* Underneath, it's an HTML checkbox, i.e. `<input type="checkbox">`, so it supports the same props,
* including `value`, `defaultChecked`, `checked`, and `onChange`.
*/
declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLElement | HTMLInputElement>>;
export default Checkbox;