Choicebox

A larger form of Radio or Checkbox, where the user has a larger tap target and more details.

Choicebox single-select

Choicebox multi-select

Usage

import { 
  ChoiceboxGroup, 
  ChoiceboxGroupItem, 
  ChoiceboxMultiItem 
} from "@momo-webplatform/mobase";

 
// Single select
<ChoiceboxGroup
  defaultValue="comfortable"
  orientation="vertical"
  className="flex space-x-4"
>
  <ChoiceboxGroupItem value="default"  >
    <div className="font-bold text-gray-800 text-sm group-disabled:text-gray-400 ">Roger Federer</div>
  </ChoiceboxGroupItem>
 
  <ChoiceboxGroupItem value="default1"  >
    <div className="font-bold text-gray-800 text-sm group-disabled:text-gray-400 ">Rafael Nadal</div>
  </ChoiceboxGroupItem>
 
  <ChoiceboxGroupItem disabled value="default2"  >
    <div className="font-bold text-gray-800 text-sm group-disabled:text-gray-400 ">Disabled Djokovic</div>
  </ChoiceboxGroupItem>
</ChoiceboxGroup>
 
 
// Multi select
 <div className="flex space-x-4">
  <ChoiceboxMultiItem id="ayaka" >
    <div className="font-bold text-gray-800 text-sm group-disabled:text-gray-400 ">Kamisato Ayaka</div>
  </ChoiceboxMultiItem>
  <ChoiceboxMultiItem defaultChecked id="yae" >
  <div className="font-bold text-gray-800 text-sm group-disabled:text-gray-400 ">Yae Miko</div>
  </ChoiceboxMultiItem>
 
  <ChoiceboxMultiItem  id="raiden" >
  <div className="font-bold text-gray-800 text-sm group-disabled:text-gray-400 ">Raiden Shogun</div>
  </ChoiceboxMultiItem>
</div>

API Reference

ChoiceboxGroup

Prop	Type	Default	Required
`defaultValue`	string	--	false
`dir`	enumDirection	--	false
`asChild`	enumboolean	--	false
`name`	string	--	false
`required`	enumboolean	--	false
`disabled`	enumboolean	--	false
`orientation`	enumhorizontal \| vertical	--	false
`loop`	enumboolean	--	false
`value`	string	--	false
`onValueChange`	(value: string) => void	--	false
`hideIndicator`	enumboolean	false	false

ChoiceboxGroupItem

Prop	Type	Default	Required
`asChild`	enumboolean	--	false
`required`	enumboolean	--	false
`value`	string	--	true
`checked`	enumboolean	--	false

ChoiceboxMultiItem

Prop	Type	Default	Required
`defaultChecked`	enumCheckedState	--	false
`asChild`	enumboolean	--	false
`required`	enumboolean	--	false
`checked`	enumCheckedState	--	false
`onCheckedChange`	(checked: CheckedState) => void	--	false

Best practices

Choicebox allows a user to make a section from a list of options. It is used to replace a radio or checkbox list.

Choicebox preforms the same action as a checkbox or radio list. However, it is more visually appealing and easier to interact with on mobile devices due to it's large size. As a rule of thumb, use Choicebox over a radio or checkbox list if possible.

Do not use Choicebox if you are limited on space or if you do not want to draw attention to an input. Choicebox should also not be used as a single select. Always use at least 2 selection boxes paired together.

Checkbox Combobox