Checkbox
View in LexiconA checkbox is a component that lets the user select the value that is written in its corresponding text label. A user can select multiple checkboxes from a group at the same time.
| install | yarn add @clayui/form |
|---|---|
| version |  |
| use | import {ClayCheckbox} from '@clayui/form'; |
Table of Contents
Use checked property to check or not the checkbox.
To set a callback function when the value of the checkbox is changed, use onChange property. See the following example:
import {Provider} from '@clayui/core';
import {ClayCheckbox} from '@clayui/form';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(false);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<ClayCheckbox
checked={value}
onChange={() => setValue((val) => !val)}
/>
</div>
</Provider>
);
}
Here you can see some options or ideas on how to extend our Checkbox component to fit your use:
Container Props
If you want to modify the container that wraps the checkbox, use containerProps:
import {Provider} from '@clayui/core';
import {ClayCheckbox} from '@clayui/form';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(false);
const data = {
id: 'test',
};
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<ClayCheckbox
aria-label="I'm checked indefinitely"
checked={true}
containerProps={data}
onChange={() => setValue((val) => !val)}
/>
</div>
</Provider>
);
}
Label
Use label property to describe what the checkbox is for.
import {Provider} from '@clayui/core';
import {ClayCheckbox} from '@clayui/form';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(false);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<ClayCheckbox
aria-label="Option 1"
checked={value}
onChange={() => setValue((val) => !val)}
label="Option 1"
/>
</div>
</Provider>
);
}
Inline
Group checkboxes on the same horizontal row by using inline property.
import {Provider} from '@clayui/core';
import {ClayCheckbox} from '@clayui/form';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(false);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<>
<ClayCheckbox
aria-label="Option 1"
checked={value}
onChange={() => setValue((val) => !val)}
label="Option 1"
inline
/>
<ClayCheckbox
aria-label="Option 2"
checked={value}
onChange={() => setValue((val) => !val)}
label="Option 2"
inline
/>
<ClayCheckbox
aria-label="Option 3"
checked={value}
onChange={() => setValue((val) => !val)}
label="Option 3"
inline
/>
</>
</div>
</Provider>
);
}
Indeterminate
Use indeterminate property for making the checkbox indeterminate.
import {Provider} from '@clayui/core';
import {ClayCheckbox} from '@clayui/form';
import React, {useState} from 'react';
import '@clayui/css/lib/css/atlas.css';
export default function App() {
const [value, setValue] = useState(false);
return (
<Provider spritemap="/public/icons.svg">
<div className="p-4">
<ClayCheckbox
aria-label="I'm indeterminate"
checked={value}
onChange={() => setValue((val) => !val)}
indeterminate
/>
</div>
</Provider>
);
}
Table of Contents