🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more
Socket
Book a DemoInstallSign in
Socket

@wedgekit/checkbox

Package Overview
Dependencies
Maintainers
15
Versions
33
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@wedgekit/checkbox

## Purpose

3.1.0
latest
npm
Version published
Weekly downloads
2
-90.91%
Maintainers
15
Weekly downloads
 
Created
Source

Checkbox

Purpose

The checkbox component is used to indicate an input that can have a boolean state (on/off), as well as indicating an indeterminate state.

Usage

import Checkbox from '@wedgekit/checkbox';

const Example = () => {
  const [allDayEvent, setAllDayEvent] = React.useState(false);
  return (
    <Checkbox
      label="My Checkbox"
      value={allDayEvent}
      onChange={(newValue) => {
        setAllDayEvent(newValue);
      }}
    />
  );
};

render(<Example />);

Props

className

Type: string

required: ❌

This is exposed but is only here so that styled-components will be able to style components correctly. Please do not use this unless you really know what you are doing.

disabled

Type: boolean

Required: ❌

Indicates whether the checkbox is disabled.

id

Type: string

Required: ❌

A string the will be passed into the onChange function indicating the ID of the checkbox that changed.

indeterminate

Type: boolean

Required: ❌

Indicates whether the checkbox is displayed as being in an indeterminate state. The indeterminate state is purely a visual state and the checkbox will still be checked or unchecked irrespective of this property. If indeterminate is true, the checkbox will show the indeterminate indicator. If false or unset, the checkbox will display as either checked or unchecked.

info

Type: InfoObject

Required: ❌

Passing an InfoObject to the info prop will populate an InfoButton adjacent to the checkbox's label.

label

Type: string

Required: ✅

A descriptive label describing the purpose of the checkbox.

labelHidden

Type: boolean

Required: ❌

Indicates whether to visibly display the label. The label will always be available to users of screen readers via aria-label.

name

DEPRECATED

Type: string

Required: ❌

The functionality of this prop has been moved to id.

required

Type: boolean

Required: ❌

Indicates whether the checkbox is required.

status

Type: 'default' | 'error' | 'success' | 'pending'

Required: ❌

Indicates the validation status. Used for styling purposes.

tabIndex

Type: number

Required: ❌

Prop used to interrupt the normal tab order of a page. It is recommend that tabIndex only be 0 or -1

onChange

Type: (checked: boolean, id: string, event: SyntheticEvent<*>) => void

Required: ✅

A function that is called when the checkbox is toggled.

Styling

The checkbox label is contained within a @wedgekit/primitives Label, which can be overridden to change the text styling.

FAQs

Package last updated on 04 May 2023

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