Checkbox

Is a component that allows users to select multiple options in a list.

Default

Status

Installation

npm @momo-ui add ...

Usage

• Checkbox represents the user's selection status. Usually used in a cluster of settings with multiple parameters or options. The user can select one, many, or none of the options in the list of options.
• Although similar to Toggle in terms of on/off function, the checkbox is used for the purpose of marking options instead of having immediate effects like toggle. Often used in a form with a Button to confirm selection.
• Note: Depending on the overall interface space, we can arrange the check box before the content or after the content as an additional action.

When the user can only choose one of two options, we use Radio Button instead of Checkbox

import { Checkbox } from "@momo-webplatform/mobase/components/CheckboxNew/checkbox";

<div className="mt-4 flex items-center justify-center w-full px-10 h-[350px] border border-white/60 rounded-md">
  <div className="flex items-center space-x-2">
    <Checkbox id="terms" />
    <label
      htmlFor="terms"
      className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed "
    >
      Accept terms and conditions
    </label>
  </div>
</div>

API Reference