@workday/canvas-kit-react-checkbox NPM

Canvas Kit Checkbox

A checkbox input.

Installation

yarn add @workday/canvas-kit-react

yarn add @workday/canvas-kit-react-checkbox

Usage

Simple Example

Note: While a base checkbox component is provided in this package, it is not accessible when used as is. It should be used in tandem with FormField to be made fully accessible (see below).

import * as React from 'react';
import Checkbox from '@workday/canvas-kit-react-checkbox';

<Checkbox disabled={false} checked={checked} onChange={this.handleCheck} />;

Accessible Example

import * as React from 'react';
import Checkbox from '@workday/canvas-kit-react-checkbox';
import FormField from '@workday/canvas-kit-react-form-field';

<FormField label="My Field" inputId="my-checkbox-field">
  <Checkbox disabled={false} checked={checked} onChange={this.handleCheck} id="my-checkbox-field" />;
</FormField>;

If use inside a FormField doesn't work for your use case, you can use the aria-labelledBy attribute.

import * as React from 'react';
import Checkbox from '@workday/canvas-kit-react-checkbox';
<label id="123">Label</label>
...
<Checkbox checked={true} onChange={this.handleCheck} aria-labelledBy="123" />;

Static Properties

None

Component Props

Required

None

Optional

`checked: boolean`

Whether or not the checkbox is checked (true) or not checked (false)

Default: false

`disabled: boolean`

Whether or not the checkbox is disabled (not able to be checked on or off)

Default: false

`id: string`

The HTML attribute id for the underlying input checkbox and label component. This is required if label is defined.

Default: A uniquely generated id

`label: string`

The content of the label associated to the input checkbox component.

`onChange: (e: React.SyntheticEvent<HTMLInputElement>) => void`

A callback that gets called everytime the checkbox state changes.

`value: string`

The value attribute of the input checkbox.

`inputRef: React.Ref<HTMLInputElement>`

A ref to the underlying input checkbox element. Use this to imperatively check or focus this component.

`error: ErrorType`

The type of error to display, if any.

Type	Description
Error	Red outline with error icon.
Alert	Yellow outline with alert icon.

Default: undefined

canvas canvas-kit react components workday checkbox

@workday/canvas-kit-react-common @workday/canvas-kit-react-core @workday/canvas-kit-react-icon @workday/canvas-system-icons-web

@infinitebrahmanuniverse/nolb-_wor @everything-registry/sub-chunk-1021

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4.0.0-prerelease.f29f26b.3

4 years ago

4.0.0-prerelease.25ebd14.2

4 years ago

4.0.0-prerelease.370c732.1

4 years ago

3.7.1-next.2

4 years ago

4.0.0-prerelease.9bee8d0.0

4 years ago

3.7.1-next.0

4 years ago

4.0.0-prerelease.2df320f.3

4 years ago

4.0.0-beta.3

4 years ago

4.0.0-prerelease.42c1aef.2

4 years ago

4.0.0-prerelease.bf33fae.0

4 years ago

4.0.0-prerelease.839d919.25

4 years ago

4.0.0-prerelease.0ec7791.1

4 years ago

4.0.0-beta.2

4 years ago

4.0.0-prerelease.0c47b9c.26

4 years ago

4.0.0-prerelease.22c6ff1.24

4 years ago

4.0.0-prerelease.9daf370.23

4 years ago

4.0.0-prerelease.e668828.22

4 years ago

3.6.1-next.14

4 years ago

4.0.0-prerelease.da2d967.21

4 years ago

4.0.0-prerelease.5f48600.20

4 years ago

3.7.0

4 years ago

4.0.0-prerelease.baf5748.18

4 years ago

4.0.0-prerelease.c1d3fa5.19

4 years ago

4.0.0-prerelease.ba8e51e.17

4 years ago

3.6.1-next.13

4 years ago

4.0.0-prerelease.f1e1a93.16

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago