react-fatless-form
Version:
A lightweight React form package designed for simplicity that simplifies form handling and validation without unnecessary complexity or bloat.
103 lines (102 loc) • 3.43 kB
TypeScript
import React from 'react';
export interface BaseCheckboxProps {
type: "checkbox";
name: string;
label?: string;
slider?: "rounded" | "default";
}
interface SingleCheckboxProps extends BaseCheckboxProps {
value: boolean;
onChange: (checked: boolean) => void;
}
interface MultiCheckboxProps extends BaseCheckboxProps {
options: {
value: string;
label: string;
}[];
value: string[];
onChange: (selectedValues: string[]) => void;
}
export type CheckboxInputType = SingleCheckboxProps | MultiCheckboxProps;
/**
* A reusable Checkbox component for handling single and multiple checkbox inputs.
*
* This component supports two modes:
* 1. **Single Checkbox**: For a single boolean value, with optional slider styles.
* 2. **Multiple Checkboxes**: For selecting multiple values from a list of options.
*
* ## Props
*
* - **SingleCheckboxProps**:
* - `name` (string): The name attribute for the checkbox input.
* - `label` (string, optional): The label displayed next to the checkbox.
* - `value` (boolean): The current checked state of the checkbox.
* - `onChange` (function): A callback triggered when the checkbox state changes.
* - `slider` ('rectangular' | 'rounded', optional): If provided, renders the checkbox as a switch.
* - `rectangular`: Renders a rectangular switch.
* - `rounded`: Renders a rounded switch.
*
* - **MultipleCheckboxProps**:
* - `name` (string): The name attribute for the group of checkboxes.
* - `label` (string, optional): A label displayed above the group of checkboxes.
* - `value` (array of strings or numbers): The current selected values.
* - `onChange` (function): A callback triggered with the updated array of selected values.
* - `options` (array of SelectOption): The options to display as checkboxes, where each option has:
* - `label` (string): The display label for the checkbox.
* - `value` (string or number): The value associated with the checkbox.
*
* ## Behavior
*
* - **Single Checkbox**:
* - If `options` is not provided, it renders a single checkbox.
* - If `slider` is provided, the checkbox is styled as a switch.
* - **Multiple Checkboxes**:
* - If `options` is provided and has at least one item, it renders a list of checkboxes.
* - If `options` is empty, the component renders nothing.
*
* ## Examples
*
* ### Single Checkbox (Default)
*
* ```tsx
* <Checkbox
* name="acceptTerms"
* label="Accept Terms and Conditions"
* value={true}
* onChange={(checked) => console.log(checked)}
* />
* ```
*
* ### Single Checkbox (Slider)
*
* ```tsx
* <Checkbox
* name="darkMode"
* label="Enable Dark Mode"
* value={false}
* onChange={(checked) => console.log(checked)}
* slider="rounded"
* />
* ```
*
* ### Multiple Checkboxes
*
* ```tsx
* <Checkbox
* name="preferences"
* label="Choose Preferences"
* value={['option1']}
* onChange={(selected) => console.log(selected)}
* options={[
* { label: 'Option 1', value: 'option1' },
* { label: 'Option 2', value: 'option2' },
* ]}
* />
* ```
*
* @param {CheckboxInputType} props - The props to configure the checkbox component.
*
* @returns {JSX.Element | null} The rendered checkbox component.
*/
export declare function Checkbox(props: CheckboxInputType): React.JSX.Element | null;
export {};