BcControlInput Props

Prop	Type	Required?	Default	Description
defaultChecked	boolean	optional		Toggles the defaultChecked state of the input element
checked	boolean	optional		Toggles the checked state of the input element. If passing checked, please pass onChange to change BcControlInput to a controlled component
inputProps	object	optional		Pass other props to the input element. Props similar to BcControlInputProps will be overridden by the latter
isDisabled	boolean	optional	false	Toggles disabled state of the control input elements
isInvalid	boolean	optional		Toggles the invalid state of the component
label	ReactNode	optional		Content to show inside .bc-control-input__label-text
name	string	required		Name of the form control input element
onChange	(e) => void	optional		Passed to input element onChange event handler
type	checkbox | radio	optional	checkbox	Switches 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.
value	string	required		Value of the element
variant	card	optional		Adds the --card variant to the label element

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

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.

The following variants are available:

Variant	Purpose
.bc-control-input--card	Used to display control input as card
.bc-control-input--invalid	Used to apply invalid styles to control input

Child components:

Child	Purpose
.bc-control-input__input	Used to apply styles to input element
.bc-control-input__label-text	Used 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).

Use checkboxes to allow users to select multiple options.

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

• Fieldsets (Forms)

Further reading

• WebAIM: Form controls
• W3C HTML5 input[type=checkbox] spec
• W3C HTML5 input[type=radio] spec