The Choices components provide accessible checkbox and radio button inputs for forms, with support for grouping, custom icons, and styling.
Checkboxes
Basic checkbox
import { FlxCheckbox } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function BasicCheckbox() {
const [checked, setChecked] = useState(false);
return (
<FlxCheckbox
label="Accept terms and conditions"
checked={checked}
onCheckedChange={setChecked}
/>
);
}
Checkbox group
Group multiple related checkboxes:
import { FlxCheckboxGroup, FlxCheckbox } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function CheckboxGroup() {
const [selectedOptions, setSelectedOptions] = useState([]);
return (
<FlxCheckboxGroup value={selectedOptions} onValueChange={setSelectedOptions}>
<FlxCheckbox value="option1" label="Email notifications" />
<FlxCheckbox value="option2" label="SMS notifications" />
<FlxCheckbox value="option3" label="Push notifications" />
</FlxCheckboxGroup>
);
}
Checkbox with custom icons
Customize the checkbox appearance with icons:
import { FlxCheckbox, FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function CustomCheckbox() {
const [checked, setChecked] = useState(false);
return (
<FlxCheckbox
label="Favorite item"
checked={checked}
onCheckedChange={setChecked}
choiceIconSelected={<FlxIcon name="heart" />}
choiceIconUnselected={<FlxIcon name="heartOutline" />}
/>
);
}
Reversed label position
Place the label before the checkbox:
<FlxCheckbox
label="I agree"
reversedLabel
checked={false}
onCheckedChange={(checked) => console.log(checked)}
/>
Disabled checkbox
<FlxCheckbox
label="This option is disabled"
disabled
checked={false}
/>
Basic radio group
import { FlxRadioGroup, FlxRadio } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function BasicRadioGroup() {
const [selectedValue, setSelectedValue] = useState('option1');
return (
<FlxRadioGroup value={selectedValue} onValueChange={setSelectedValue}>
<FlxRadio value="option1" label="Option 1" />
<FlxRadio value="option2" label="Option 2" />
<FlxRadio value="option3" label="Option 3" />
</FlxRadioGroup>
);
}
Radio with custom icons
import { FlxRadioGroup, FlxRadio, FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function CustomRadio() {
const [plan, setPlan] = useState('basic');
return (
<FlxRadioGroup value={plan} onValueChange={setPlan}>
<FlxRadio
value="basic"
label="Basic Plan - $9/month"
choiceIconSelected={<FlxIcon name="checkCircle" />}
choiceIconUnselected={<FlxIcon name="circle" />}
/>
<FlxRadio
value="pro"
label="Pro Plan - $29/month"
choiceIconSelected={<FlxIcon name="checkCircle" />}
choiceIconUnselected={<FlxIcon name="circle" />}
/>
</FlxRadioGroup>
);
}
import { FlxCheckboxGroup, FlxCheckbox, FlxRadioGroup, FlxRadio, FlxButton } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function SurveyForm() {
const [interests, setInterests] = useState([]);
const [experience, setExperience] = useState('');
const handleSubmit = (e) => {
e.preventDefault();
console.log({
interests,
experience
});
};
return (
<form onSubmit={handleSubmit}>
<div>
<h3>What are you interested in?</h3>
<FlxCheckboxGroup value={interests} onValueChange={setInterests}>
<FlxCheckbox value="development" label="Software Development" />
<FlxCheckbox value="design" label="UI/UX Design" />
<FlxCheckbox value="marketing" label="Marketing" />
<FlxCheckbox value="sales" label="Sales" />
</FlxCheckboxGroup>
</div>
<div style={{ marginTop: '24px' }}>
<h3>Experience level</h3>
<FlxRadioGroup value={experience} onValueChange={setExperience}>
<FlxRadio value="beginner" label="Beginner (0-2 years)" />
<FlxRadio value="intermediate" label="Intermediate (2-5 years)" />
<FlxRadio value="expert" label="Expert (5+ years)" />
</FlxRadioGroup>
</div>
<FlxButton type="submit" variant="fill" style={{ marginTop: '24px' }}>
Submit Survey
</FlxButton>
</form>
);
}
Borderless styling
Remove borders from checkbox and radio groups:
<FlxCheckboxGroup noBorder value={[]} onValueChange={() => {}}>
<FlxCheckbox value="1" label="Option 1" />
<FlxCheckbox value="2" label="Option 2" />
</FlxCheckboxGroup>
<FlxRadioGroup noBorder value="" onValueChange={() => {}}>
<FlxRadio value="1" label="Option 1" />
<FlxRadio value="2" label="Option 2" />
</FlxRadioGroup>
Switch component
For toggle switches, use the FlxSwitch component:
import { FlxSwitch, FlxSwitchContainer } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function ToggleSwitch() {
const [enabled, setEnabled] = useState(false);
return (
<FlxSwitchContainer labelPosition="end">
<FlxSwitch
switchType="toggle"
value={enabled}
onChange={setEnabled}
/>
<label>Enable notifications</label>
</FlxSwitchContainer>
);
}
Switch with checkbox style
import { FlxSwitch, FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';
function CheckboxSwitch() {
const [checked, setChecked] = useState(false);
return (
<FlxSwitch
switchType="checkbox"
value={checked}
onChange={setChecked}
checkboxIcons={{
selected: <FlxIcon name="check" />,
unselected: null
}}
/>
);
}
Props
FlxCheckbox
The label text for the checkbox.
Controls the checked state.
onCheckedChange
(checked: boolean) => void
Callback fired when the checked state changes.
choiceIconSelected
ReactElement<FlxIconProps>
Custom icon to display when the checkbox is checked.
choiceIconUnselected
ReactElement<FlxIconProps>
Custom icon to display when the checkbox is unchecked.
When true, positions the label before the checkbox.
FlxCheckboxGroup
Array of selected checkbox values.
onValueChange
(value: string[]) => void
Callback fired when the selection changes.
Removes borders from the checkbox group container.
FlxRadio
The label text for the radio button.
The value of this radio option.
choiceIconSelected
ReactElement<FlxIconProps>
Custom icon when the radio is selected.
choiceIconUnselected
ReactElement<FlxIconProps>
Custom icon when the radio is unselected.
FlxRadioGroup
The currently selected radio value.
Callback fired when the selection changes.
Removes borders from the radio group container.
FlxSwitch
The current switch state.
Callback fired when the switch state changes.
switchType
'toggle' | 'checkbox'
default:"toggle"
The visual style of the switch.
checkboxIcons
{ selected?: ReactElement; unselected?: ReactElement }
Custom icons for checkbox-style switches.
TypeScript
import type {
FlxCheckboxProps,
FlxRadioProps,
FlxCheckboxGroupProps,
FlxRadioGroupProps,
FlxSwitchProps
} from '@flowx/react-ui-toolkit';
const checkboxConfig: FlxCheckboxProps = {
label: 'Accept terms',
checked: false,
onCheckedChange: (checked) => console.log(checked)
};
Accessibility
- Proper ARIA roles and attributes
- Keyboard navigation (Space to toggle)
- Focus indicators
- Label association for screen readers
- Group semantics for related options
Always provide a label prop for checkboxes and radios. Don’t rely solely on surrounding text for context, as this impacts accessibility.
Use checkbox groups when users can select multiple options, and radio groups when only one selection is allowed.