Menú
Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists.
Instalar con Codex o Claude Copia este prompt, pégalo en Codex, Claude u otro asistente, y deja que revise la página de la skill y la instale por ti.
Basado en la clasificación ocupacional SOC
Accordion component with collapsible sections. Use for FAQs, nested content, or expandable details sections.
Button component with variants, sizes, loading states, and icon support. Use when creating clickable actions, forms, or navigation buttons.
Calendar component for date and month selection. Use when building date pickers, scheduling interfaces, or date range selectors.
Carousel component for image/content sliders with navigation controls. Use for image galleries, hero sections, or content that scrolls horizontally.
Dropdown menu component with trigger and content pattern. Use when building selectable menus, action menus, or nested navigation.
Icon-only button component for actions. Use for toolbars, navigation bars, or compact action buttons without text.
| name | groww-checkbox |
| description | Checkbox component for boolean or multi-select inputs. Use when building forms with boolean toggles or multiple selection lists. |
import CheckBox from '@groww-tech/ui-toolkit/dist/esm/components/atoms/CheckBox';
import CheckBoxGroup from '@groww-tech/ui-toolkit/dist/esm/components/molecules/CheckBoxGroup';
// or
import { CheckBox, CheckBoxGroup } from '@groww-tech/ui-toolkit';
interface CheckBoxProps {
value: string; // Checkbox value (required)
isChecked: boolean; // Checked state (required)
handleOnClick: (value: string, isChecked: boolean) => void; // Change handler
label?: React.ReactNode; // Label text/element
size?: 'small' | 'medium' | 'large'; // Checkbox size
isDisabled?: boolean; // Disabled state
checkBoxDirection?: 'left' | 'right'; // Label position
className?: string;
dataTestId?: string;
id?: string;
name?: string;
}
interface CheckBoxGroupProps {
checkBoxes: Array<{
value: string;
label: string;
isChecked: boolean;
}>;
handleOnClick: (value: string, isChecked: boolean) => void;
direction?: 'vertical' | 'horizontal';
size?: 'small' | 'medium' | 'large';
containerClassName?: string;
dataTestId?: string;
}
<CheckBox
value="agree"
isChecked={isAgreed}
handleOnClick={(value, checked) => setIsAgreed(checked)}
label="I agree to the terms and conditions"
/>
<CheckBox
value="remember"
isChecked={rememberMe}
handleOnClick={setRememberMe}
label="Remember me"
checkBoxDirection="right"
/>
<CheckBox
value="disabled"
isChecked={false}
handleOnClick={() => {}}
label="This option is not available"
isDisabled={true}
/>
<CheckBoxGroup
checkBoxes={[
{ value: 'apple', label: 'Apple', isChecked: selections.includes('apple') },
{ value: 'banana', label: 'Banana', isChecked: selections.includes('banana') },
{ value: 'orange', label: 'Orange', isChecked: selections.includes('orange') },
]}
handleOnClick={(value, checked) => {
if (checked) {
setSelections([...selections, value]);
} else {
setSelections(selections.filter(s => s !== value));
}
}}
direction="vertical"
/>
role="checkbox" attribute