Checkbox

Extends <input type="checkbox" />, allows input styling.

Copy
import { Checkbox } from 'minerva-ui';

Stay Logged In
() => {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
      Stay Logged In
    </Checkbox>
  );
};
() => {
  const [checked, setChecked] = useState(false);
  return (
    <Checkbox checked={checked} onChange={() => setChecked(!checked)}>
      Stay Logged In
    </Checkbox>
  );
};

Disabled Checkbox#

Stay Logged In
<Checkbox disabled>Stay Logged In</Checkbox>
<Checkbox disabled>Stay Logged In</Checkbox>

Customize Checkbox#

Checked Background ColorChange Check Color
<Stack horizontal>
  <Checkbox _checked={{ bg: 'red.700' }}>Checked Background Color</Checkbox>
  <Checkbox bg="#0076ff" checkColor="#0076ff" _checked={{ bg: '#fff' }}>
    Change Check Color
  </Checkbox>
</Stack>
<Stack horizontal>
  <Checkbox _checked={{ bg: 'red.700' }}>Checked Background Color</Checkbox>
  <Checkbox bg="#0076ff" checkColor="#0076ff" _checked={{ bg: '#fff' }}>
    Change Check Color
  </Checkbox>
</Stack>

Props#

Props related to the Checkbox component.