CheckLabel
A checkbox with its label, clickable across the whole row.
import { CheckLabel } from '@iffday/ui';Example
CheckLabel is an 18px checkbox with its text inside a <label>, so clicking the text toggles it. Checked, the box fills with the primary button color.
import { useT } from '@iffday/i18n';
import { CheckLabel } from '@iffday/ui';
import { useState } from 'react';
export default function Example() {
const t = useT();
const [wanted, setWanted] = useState(true);
const [watched, setWatched] = useState(false);
return (
<div style={{ display: 'grid', gap: 12 }}>
<CheckLabel checked={wanted} onChange={setWanted}>
{t('film.card.watchlist')}
</CheckLabel>
<CheckLabel checked={watched} onChange={setWatched}>
{t('film.entry.markWatched')}
</CheckLabel>
<CheckLabel checked onChange={() => {}} disabled>
{t('nav.emailVerified')}
</CheckLabel>
</div>
);
}Usage
It is controlled: pass both checked and onChange. Use it for settings that apply as soon as they are ticked. When each state has its own name (Watchlist, On watchlist), use ToggleButton.
Props
CheckLabel
packages/ui/src/controls.tsx:145| Prop | Type | Default |
|---|---|---|
checked* | boolean | |
onChange* | (checked: boolean) => void | |
disabled | boolean | false |
children* | ReactNode |