@eds/checkbox
v4.0.21
Checkbox
A control that allows the user to toggle between checked and not checked.Prop | Required | Description | Type |
|---|---|---|---|
children | — | The checkbox label content. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | string & ReactElement<any, string | JSXElementConstructor<any>> | string & Iterable<ReactNode> | string & ReactPortal | number & ReactElement<any, string | JSXElementConstructor<any>> | number & Iterable<ReactNode> | number & ReactPortal | false & ReactElement<any, string | JSXElementConstructor<any>> | false & Iterable<ReactNode> | false & ReactPortal | true & ReactElement<any, string | JSXElementConstructor<any>> | true & Iterable<ReactNode> | true & ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> & string | ReactElement<any, string | JSXElementConstructor<any>> & number | ReactElement<any, string | JSXElementConstructor<any>> & false | ReactElement<any, string | JSXElementConstructor<any>> & true | ReactElement<any, string | JSXElementConstructor<any>> & Iterable<ReactNode> | ReactElement<any, string | JSXElementConstructor<any>> & ReactPortal | ReactPortal & string | ReactPortal & number | ReactPortal & false | ReactPortal & true | ReactPortal & ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal & Iterable<ReactNode> | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & string | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & number | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & false | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & true | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & ReactElement<any, string | JSXElementConstructor<...>> | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & Iterable<ReactNode> | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } & ReactPortal | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & string | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & number | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & false | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & true | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & ReactElement<any, string | JSXElementConstructor<any>> | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & Iterable<ReactNode> | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] & ReactPortal |
indeterminate | — | When true, the checkbox will be aria-checked="mixed". Defaults to false. | boolean |
size | — | Size options for the checkbox and check/indeterminate icon. Defaults to medium. | "small" | "medium" |
Prop | Required | Description | Type |
|---|---|---|---|
children | ✅ | The Checkbox components, each with a unique value. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
value | ✅ | Values of the nested checked checkboxes. | string[] |
onInputChange | ✅ | Callback fired when a nested checkbox is checked. | (selectedValues: string[]) => void |
invalid | — | The current validity state of the input. Defaults to false. | boolean |
message | — | Feedback about the input's current state. Renders in critical color if invalid is true, otherwise it defaults to positive color. | string |
keepSpaceForMessage | — | To prevent a jarring experience when the message appears after validation, this keeps the vertical rhythm consistent when used in a form with other fields. Defaults to true. | boolean |
disabled | — | Disables the nested Checkbox components. | boolean |
name | — | Name for the group of Checkbox components. | string |
horizontal | — | Make the children stack horizontally. Defaults to false. | boolean |
size | — | Control the input size of the nested Checkbox components. | "small" | "medium" |
id | — | A base ID for extending to the container element and message. | string |
Prop | Required | Description | Type |
|---|---|---|---|
children | — | The checkbox label content. | string | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal | { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | string & ReactElement<any, string | JSXElementConstructor<any>> | string & ReactPortal | string & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | string & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | number & ReactElement<any, string | JSXElementConstructor<any>> | number & ReactPortal | number & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | number & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | false & ReactElement<any, string | JSXElementConstructor<any>> | false & ReactPortal | false & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | false & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | true & ReactElement<any, string | JSXElementConstructor<any>> | true & ReactPortal | true & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | true & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | ReactElement<any, string | JSXElementConstructor<any>> & string | ReactElement<any, string | JSXElementConstructor<any>> & number | ReactElement<any, string | JSXElementConstructor<any>> & false | ReactElement<any, string | JSXElementConstructor<any>> & true | ReactElement<any, string | JSXElementConstructor<any>> & ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | ReactElement<any, string | JSXElementConstructor<any>> & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | Iterable<ReactNode> & string | Iterable<ReactNode> & number | Iterable<ReactNode> & false | Iterable<ReactNode> & true | Iterable<ReactNode> & ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> & ReactPortal | Iterable<ReactNode> & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | Iterable<ReactNode> & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] | ReactPortal & string | ReactPortal & number | ReactPortal & false | ReactPortal & true | ReactPortal & ReactElement<any, string | JSXElementConstructor<any>> | ReactPortal & { key?: string | number; ref?: null; props?: { children?: boolean | ReactChild | ReactPortal | StrictReactFragment; }; } | ReactPortal & (boolean | ReactChild | ReactPortal | StrictReactFragment)[] |
indeterminate | — | When true, the checkbox will be aria-checked="mixed". Defaults to false. | boolean |
size | — | Size options for the checkbox and check/indeterminate icon. Defaults to medium. | "small" | "medium" |