Falcon UI

checkbox

Checkbox component size can be easily adjusted via theme-based size prop, but it also accepts other responsive, theme-based style props.

xxxxxxxxxx
 
import { Checkbox } from '@deity/falcon-ui';

 
<Checkbox size="sm" mr="md" />
<Checkbox mr="md" defaultChecked />
<Checkbox size="lg" />

Custom Checkbox checkmark icon can be provided via icons section of Theme.

 
<ThemeProvider theme={themeWithCustomCheckmark}>
  <Checkbox size="sm" mr="md" />
  <Checkbox mr="md" defaultChecked />
  <Checkbox size="lg" />
</ThemeProvider>

xxxxxxxxxx
 
const themeWithCustomCheckmark = createTheme({
  icons: {
    checkboxCheckmarkIcon: {
      icon: CustomIconSvgComponent,
      fill: 'white'
    }
  }
});