Components

Component

SelectBox

Bordered checkbox and radio option cards for selecting one or more options.

ReactReact Native8 props
PreviewReact

Imports

import { CheckSelectBoxGroup, CheckSelectBox, CheckSelectBoxCheckmark, RadioSelectBoxRoot, RadioSelectBoxItem, RadioSelectBoxRadiomark } from "@hozorica/hods-react/select-box";
import { CheckSelectBoxGroup, CheckSelectBox, CheckSelectBoxCheckmark, RadioSelectBoxRoot, RadioSelectBoxItem, RadioSelectBoxRadiomark } from "@hozorica/hods-react-native/select-box";

Props

PropTypeDescription
label / descriptionReactNodeOption content.
prefixIcon / suffix / footerReactNodeOption slots.
checked / defaultCheckedbooleanCheckSelectBox state.
value / defaultValuestringRadioSelectBox state.
onCheckedChange / onValueChangefunctionSelection change callbacks.
columnsnumberGroup grid column count.
footerVisibilitywhen-selected | when-not-selected | alwaysControls footer display.
invalid / required / disabledbooleanValidation and interaction states.

Platform Support

React

Checkbox and radio select cards with labels, descriptions, icons, suffix marks, footers, columns, and controlled state.

React Native

Pressable checkbox and radio cards with matching visible API.

Usage

<CheckSelectBoxGroup><CheckSelectBox label="Apple" suffix={<CheckSelectBoxCheckmark />} /></CheckSelectBoxGroup>

Notes

  • Use CheckSelectBoxGroup for multi-select and RadioSelectBoxRoot for single-select.
  • columns > 1 defaults item layout to vertical unless overridden.