You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP
Socket
Socket
Sign inDemoInstall

@workday/canvas-kit-react-checkbox

Package Overview
Dependencies
Maintainers
6
Versions
299
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@workday/canvas-kit-react-checkbox

A Canvas-styled checkbox input


Version published
Weekly downloads
4.5K
increased by10.06%
Maintainers
6
Created
Weekly downloads
 

Readme

Source

Canvas Kit Checkbox

A checkbox input.

> Workday Design Reference

Installation

yarn add @workday/canvas-kit-react

or

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.ChangeEvent<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.

TypeDescription
ErrorRed outline with error icon.
AlertYellow outline with alert icon.

Default: undefined


indeterminate: boolean

Used on a checkbox with nested child checkboxes to denote that some, but not all, child checkboxes are selected.

Default: false

Keywords

FAQs

Package last updated on 09 Jul 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc