@intility/bifrost-react
Version:
React library for Intility's design system, Bifrost.
45 lines (44 loc) • 1.78 kB
TypeScript
import type { PropsFor } from "../../types.js";
export type CheckboxType = CheckboxProps["type"];
export type CheckboxAlignment = CheckboxProps["align"];
export type CheckboxProps = PropsFor<"input", {
/** Label text */
label: React.ReactNode;
/** When checked state is not known (useful for showing the state of a group of checkboxes) */
indeterminate?: boolean;
/** Hide label text, will use `label` prop value as `aria-label` for screen readers */
hideLabel?: boolean;
/** Checkbox type: `"checkbox"` (default), `"radio"`, or `"switch"` */
type?: "checkbox" | "radio" | "switch";
/** Display as a button */
button?: boolean;
/** Make the `button` styling smaller */
small?: boolean;
/** Align checkbox icon `"left"` or `"right"` of label text (`"left"` is default, except when `type="switch"`) */
align?: "left" | "right";
/** Available states: `"default"` (theme color), `"alert"` (red), or `"inherit"` (follow current text color) */
state?: "default" | "alert" | "inherit";
/** Style for internal `<input>` element */
inputStyle?: React.CSSProperties;
/** CSS class name(s) for internal `<input>` element */
inputClassName?: string;
/** Props for the internal `<label>` element */
labelProps?: React.JSX.IntrinsicElements["label"];
}>;
/**
* Checkbox, radio button, or a switch toggle
*
* @see https://bifrost.intility.com/react/checkbox
*
* @example
* <Checkbox label="Basic checkbox" />
*
* @example
* <Checkbox
* label="Controlled state"
* checked={selected}
* onChange={() => setSelected(!selected)}
* />
*/
declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
export default Checkbox;