react-native-ui-lib

{ "name": "Checkbox", "category": "controls", "description": "Checkbox component for toggling boolean value related to some context", "extends": [ "basic/TouchableOpacity" ], "modifiers": [ "margin", "background" ], "example": "https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CheckboxScreen.tsx", "images": [ "https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Checkbox/Checkbox.gif?raw=true" ], "props": [ { "name": "value", "type": "boolean", "description": "The Checkbox value. If true the switch will be turned on. Default value is false" }, { "name": "onValueChange", "type": "(value) => void", "description": "Callback function for value change event" }, { "name": "onChangeValidity", "type": "(isValid: boolean) => void", "description": "Callback for when field validity has changed" }, { "name": "required", "type": "boolean", "description": "Whether the checkbox is required" }, { "name": "disabled", "type": "boolean", "description": "Whether the checkbox should be disabled" }, { "name": "color", "type": "string", "description": "The Checkbox color" }, { "name": "outline", "type": "boolean", "description": "Alternative Checkbox outline style" }, { "name": "size", "type": "number", "description": "The Checkbox size, affect both width and height" }, { "name": "borderRadius", "type": "number", "description": "The Checkbox border radius" }, { "name": "selectedIcon", "type": "ImageRequireSource", "description": "The icon asset to use for the selected indication" }, { "name": "iconColor", "type": "string", "description": "The selected icon color" }, { "name": "label", "type": "string", "description": "Add a label to the Checkbox" }, { "name": "labelStyle", "type": "TextStyle", "description": "Pass to style the label" }, { "name": "labelProps", "type": "TextProps", "description": "Props to pass on to the label component" }, { "name": "style", "type": "ViewStyle", "description": "Custom styling for the Checkbox" }, { "name": "containerStyle", "type": "ViewStyle", "description": "Custom styling for the checkbox and label container" } ], "snippet": [ "function Example(props) {", " const [value, setValue] = useState(false$1);", " return (", " <div>", " <Checkbox value={value$2} onValueChange={setValue$3}/>", " </div>", " );", "}" ], "docs": { "hero": { "title": "Checkbox", "description": "Checkboxes allow the user to select one or more items from a set. They can be used to turn an option on or off, or to indicate approval or verification.", "type": "hero", "layout": "horizontal", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_preview.png" } ] }, "tabs": [ { "title": "Overview", "sections": [ { "type": "section", "title": "Usage Examples", "description": "", "content": [ { "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=26-3181&embed-host=share" } ] }, { "type": "table", "columns": [ "Property", "Component" ], "items": [ { "title": "Default", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_style_default.png" } ] }, { "title": "Light", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_style_light.png" } ] } ], "title": "Styles", "description": "" }, { "type": "table", "columns": [ "Property", "Component" ], "items": [ { "title": "Un-Checked", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_unchecked.png" } ] }, { "title": "Checked", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_checked.png" } ] }, { "title": "Indeterminate", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_indeterminate.png" } ] }, { "title": "Validation Error", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_validation_error.png" } ] }, { "title": "Disabled", "description": "", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_states_disabled.png" } ] } ], "title": "States", "description": "" }, { "type": "table", "columns": [ "Property", "Component" ], "items": [ { "title": "Label", "description": "A label can be displayed next to the Checkbox.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_props_label.png" } ] } ], "title": "Accessories", "description": "" }, { "type": "list", "items": [ { "title": "Size", "description": "The checkbox comes only in one size, and cannot be resized.\nSize: 24x24", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_overview_spec.png" } ] } ], "layout": "horizontal", "title": "Spec", "description": "" } ] }, { "title": "UX Guidelines", "sections": [ { "type": "section", "content": [ { "value": "https://embed.figma.com/design/xFjvYNkGTmYTGYMLrmz9Ir/Docs-Assets?node-id=61-6739&embed-host=share" } ], "title": "Position", "description": "For screens requiring multiple selections, use the Multi-Select List. If a Checkbox is used to indicate approval or verification, place it with a label to its right." }, { "type": "section", "title": "Checkbox Group", "description": "Use ListItem component to group multiple options for the user to choose from.", "content": [ { "value": "https://wixmp-1d257fba8470f1b562a0f5f2.wixmp.com/mads-docs-assets/assets/Components Docs/Checkbox/checkbox_ux_checkbox_group.png" } ] } ] } ] } }