Control input

Last modified:

Checkboxes and radio buttons for all occasions.


Example of Control input - default

<BcControlInput label='Tamagotchi' name='device1' value='Tamagotchi' />

React documentation

Last modified:

BcControlInput Props

defaultCheckedbooleanoptionalToggles the defaultChecked state of the input element
checkedbooleanoptionalToggles the checked state of the input element. If passing checked, please pass onChange to change BcControlInput to a controlled component
inputPropsobjectoptionalPass other props to the input element. Props similar to BcControlInputProps will be overridden by the latter
isDisabledbooleanoptionalfalseToggles disabled state of the control input elements
isInvalidbooleanoptionalToggles the invalid state of the component
labelReactNodeoptionalContent to show inside .bc-control-input__label-text
namestringrequiredName of the form control input element
onChange(e) => voidoptionalPassed to input element onChange event handler
typecheckbox | radiooptionalcheckboxSwitches between showing a checkbox or a radio input element
This prop is provided so we prevent developers to pass other types to the input element.
valuestringrequiredValue of the element
variantcardoptionalAdds the --card variant to the label element

Any extended types: React.InputHTMLAttributes<HTMLInputElement> any other props will be passed to the label element


Last modified:

Wrapping checkboxes and radio buttons

Wrap both checkboxes or radio buttons:

  1. In a <fieldset> to associate them, and provide a brief but clear <legend>
  2. Wrap the <label> around the <input> — this ensures a user can select an option by clicking on the <input>, the <label> text, or the whitespace between them.

ℹ️ Exceptions: Single checkboxes or a duo of radio buttons only if the options [labels] provide enough context by themselves. For example, a single checkbox to confirm reading and agreeing to a Submission non-disclosure agreement.

‘Unlabelled’ control input variant

This variant visually hides the associated label text, with the expectation that:

  1. Visual proximity to associated data (eg a table row) signifies what the selection is
  2. A replacement label is provided instead through aria-label, onto the <input>.

⚠️ For technical reasons we still require a nested <span> with the .bc-control-input__label-text class inside the <input>. Note that this span needs to entirely empty.

The <label> continues to wrap the <input> in this variant.

‘Card’ control input variant

This checkbox and radio variant adds a large panel as a clickable area for the entire card. It can contain:

  • label text (required)
  • hint text
  • and images.

Use only for simplified forms that involve multiple steps to complete, for example, onboarding steps or wizards.

Use grid system to specify card widths in different screen sizes.

Grouping cards horizontally

Group cards with .bc-control-input--cards to arrange cards horizontally in a row.

Adding hint text and images to card variant

Add a descriptive string to your <label> (Preferably with the same content nested inside the <label>) with aria-label. This will ensure that the screen reader reads out the entire content instead of hinting that there are other items.


Last modified:

The following variants are available:

.bc-control-input--cardUsed to display control input as card
.bc-control-input--invalidUsed to apply invalid styles to control input

Child components:

.bc-control-input__inputUsed to apply styles to input element
.bc-control-input__label-textUsed to apply styles to label text container

Radio inputs

Grouped radio inputs need to share the same name value.

Radio inputs and select dropdowns

Generally use radio buttons over <select> dropdowns.

If it’s important to retain the option of an unselected state consider using a select dropdown since it is difficult for users to revert all radio buttons in a group to their unselected state.

For this reason — when using radio buttons — consider marking the most popular option in a button group as already ‘pre-selected’ (checked).


Last modified:


Last modified:

Use checkboxes to allow users to select multiple options.

Use radio buttons to allow users to select a single option from a group.

See also

Last modified: