Skip to content
This repository has been archived by the owner on Oct 30, 2022. It is now read-only.

Latest commit

 

History

History
99 lines (66 loc) · 4.16 KB

checkbox.md

File metadata and controls

99 lines (66 loc) · 4.16 KB
Raw

Checkbox

Form control to select one or more options from a set. Generates a styled checkbox input element.

Main features

  • Custom icons
  • Customize button behaviour
  • Set size
  • Set the active state based on the checked state
  • Keyboard control
  • RTL (right-to-left) support

Usage

Keyboard control

Press TAB to navigate to a button - it will show a highlight. Press ENTER to execute the equivalent of a click.

Options

Checkbox specific

Parameter Required Type Default Description
checked optional Boolean false Managed checked state (see: Handling state)
defaultChecked optional Boolean false Initially checked state; ignored if value is used
disabled optional Boolean Set to true to disable the Checkbox
iconButton optional Options object for the Icon Button Add attributes like wash and ink
iconOff optional Options object for Icon Assigns a different icon for the off state
iconOn optional Options object for Icon Assigns a different icon for the on state
label optional String Text label
name optional String Input element name
onChange optional Function ({ event: Event, checked: boolean, value: string }) => undefined See: Handling state
selectable optional Function (selected: boolean) => boolean Sets the active state based on the checkbox state; receives the current selected state, return the selectable state
size optional String "regular" Equivalent to Icon's type option; either "small" (16px), "regular" (24px), "medium" (32px), "large" (40px)
value optional String Input element value

Common component options

Parameter Required Type Default Description
after optional String, hyperscript or component Extra content after main content; note that this content is placed right of preceding elements with a higher stacking depth
before optional String, hyperscript or component Extra content before main content; note that this content is placed left of subsequent elements with a lower stacking depth
className optional String Extra CSS class appended to pe-checkbox-control
element optional String "div" HTML element tag for the checkbox container
events optional Object Options object containing one or more standard events such as onclick (React: onClick)
id optional String HTML element id for the checkbox container
tabindex (React: tabIndex) optional Integer Tab index
tone optional String: "dark" or "light" Renders the component light on dark (sets class pe-dark-tone); use "light" to locally inverse (sets class pe-light-tone)

Composition

Checkbox is composed from:

CSS classes