Falcon UI

radio

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

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

 
<Radio name="size" size="sm" mr="md" />
<Radio name="size" mr="md" defaultChecked />
<Radio name="size" size="lg" />

Custom Radio checked icon can be provided via icons section of Theme.

 
<ThemeProvider theme={themeWithCustomRadioCheck}>
  <Radio name="custom" size="sm" mr="md" />
  <Radio name="custom" mr="md" defaultChecked />
  <Radio name="custom" size="lg" />
</ThemeProvider>

xxxxxxxxxx
 
const themeWithCustomRadioCheck = createTheme({
  icons: {
    radioCheckedIcon: {
      icon: Circle
    }
  }
});