Checkbox
Checkbox provides users to select either multiple items from a list or to mark one individual item as selected.
| install | version | usage | style |
|---|---|---|---|
| yarn add @ciceksepeti/cui-checkbox | 1.0.0 | import {Checkbox} from '@ciceksepeti/cui-checkbox' | import '@ciceksepeti/cui-checkbox/style.css' |
Content​
Tri-state checkbox components allow a user to input true/false/indeterminate states.
Examples​
Example of a default behavior of 'Checkbox' component.
Default​
import React, { useState } from 'react';
import { Checkbox } from '@ciceksepeti/cui-checkbox';
import '@ciceksepeti/cui-checkbox/styles.css';
const Example = () => {
const [checked, setChecked] = useState(false);
return (
<div style={{ display: 'flex', alignItems: 'center' }}>
<Checkbox
id="rose"
name="rose"
value="rose"
disabled={false}
checked={checked}
indeterminate={false}
onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
setChecked(event.target.checked)
}
/>
<label htmlFor="rose">rose</label>
</div>
);
};
Checkbox Types​
- Active
- Disabled
- Indeterminate
Props​
Checkbox Props​
Name | Type | Default | Required | Description |
as | string | div | - | Changes html tag of checkbox component which renders to DOM |
id | string | - | - | ID of input element |
name | string | - | - | Name of input element |
indeterminate | boolean | false | - | Sets the indeterminate state |
disabled | boolean | false | - | Sets the disabled state |
checked | boolean | undefined | - | Sets the check state |
Checkbox Keyboard Actions​
Name | Type | Description |
Tab | Tab | A tab keyboard button switches between checkboxes. |
Spacebar | Spacebar | Spacebar keyboard button changes the state of checkbox item as selected or unselected. |
Playground​
Styling​
Element Selectors​
tip
Name | Type |
[data-cui-checkbox] | Element Selector |
[data-cui-checkbox-disabled='true'] | Element Selector |
[data-cui-checkbox-keyboard-focus='true'] | Element Selector |
[data-cui-checkbox-status='true'] | Element Selector |
[data-cui-checkbox-status='mixed'] | Element Selector |
[data-cui-checkbox-status='true']::before | Element and Pseudo Selectors |
[data-cui-checkbox-status='mixed']::after | Element and Pseudo Selectors |
[data-cui-checkbox-input] | Element Selector |
Default Selectors Values​
[data-cui-checkbox] {
width: 18px;
height: 18px;
cursor: pointer;
margin-right: 5px;
position: relative;
border-radius: 3px;
display: inline-block;
box-sizing: border-box;
border: 2px solid #52ad36;
}
[data-cui-checkbox-disabled='true'] {
opacity: 0.5;
}
[data-cui-checkbox-keyboard-focus='true'] {
box-shadow: 0 0 1px 3px cornflowerblue;
outline: #52ad36 auto 2px;
}
[data-cui-checkbox-status='true'],
[data-cui-checkbox-status='mixed'] {
background: #52ad36;
}
[data-cui-checkbox-status='true']::before {
top: 50%;
left: 50%;
content: '';
position: absolute;
border: solid #fff;
display: inline-block;
width: calc(45% - 2px);
height: calc(90% - 3px);
border-width: 0 2px 2px 0;
transform: translateY(-65%) translateX(-50%) rotate(45deg);
}
[data-cui-checkbox-status='mixed']::after {
top: 40%;
left: 28%;
width: 50%;
height: 15%;
content: '';
position: absolute;
display: inline-block;
background-color: #fff;
}
[data-cui-checkbox-input] {
top: 0;
left: 0;
margin: 0;
opacity: 0;
padding: 0;
z-index: 1;
width: 100%;
height: 100%;
outline: none;
position: absolute;
}