8x8 Oxygen - Checkbox

Installation

$ yarn add @8x8/oxygen-checkbox

$ npm install @8x8/oxygen-checkbox

Usage

import Checkbox, { CheckboxGroup } from '@8x8/oxygen-checkbox';

<Checkbox label="Example label" value="value0" name="value0name" isChecked />

Props

Checkbox

| Name | Type | Default | Description | | -------------------------- | --------------------------------------------------------- | ----------------- | ----------------------------------------------------------------------------------- | | theme | Partial<CheckboxTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider | | testId | string | 'CHECKBOX' | Checkbox test id | | id | string | autogenerated | Value for id input attribute and htmlFor label attribute | | label | node | null | Specifies the label content for the checkbox input (text or custom component) | | value | oneOfType([number, string, bool, shape({ id*: string })]) | '' | Checkbox input value | | name | string | undefined | Specifies the name prop for the checkbox input | | infoBoxText | node | undefined | Shows info icon and renders text inside Tooltip | | infoBoxButtonLabel | string | undefined | Adds accessible aria-label to info button | | isChecked | bool | false | Specifies if the checkbox is checked | | isDisabled | bool | false | Specifies if the checkbox is disabled | | isIndeterminate | bool | false | Specifies if the checkbox has indeterminate state | | showLabelTooltipOnOverflow | bool | true | Show label tooltip on label overflow | | onBlur | func | noop | Synthetic event | | onChange | func | noop | Callback for the checkbox input | | onFocus | func | noop | Synthetic event |

CheckboxGroup

| Name | Type | Default | Description | | ------------ | ----------------------------- | ------- | ----------------------------------------------------------------------------------- | | children | oneOfType([array, node]) | null | Radio inputs to be rendered | | isHorizontal | bool | false | Specifies if the group should be displayed horizontally or vertically | | theme | Partial<CheckboxGroupTheme> | | Overrides applied on top of the light or dark settings resolved by OxygenProvider |