Documentation
Toggle Button
Examples
Checkbox
By default, any number of checkboxes that are immediate sibling will be vertically stacked and appropriately spaced with FormCheck.
<Form>
{['checkbox'].map((type) => (
<div key={'default-{type}'} className="mb-3">
<Form.Check
type={type}
id={'default-{type}'}
label={'Checkbox'}
/>
<Form.Check
type={type}
id={'default-{type}'}
label={'Checked'}
checked
/>
</div>
))}
</Form>
Disable Checkbox
<Form>
{['checkbox'].map((type) => (
<div key={'default-{type}'} className="mb-3">
<Form.Check
disabled
type={type}
label={'Disabled Checkbox'}
id={'disabled-default-{type}'}
/>
<Form.Check
disabled
type={type}
label={'Disabled Checked Checkbox'}
id={'disabled-default-{type}''}
checked
/>
</div>
))}
</Form>
Radio
By default, any number of Radios that are immediate sibling will be vertically stacked and appropriately spaced with FormCheck.
<Form>
{['radio'].map((type) => (
<div key={'default-{type}'} className="mb-3">
<Form.Check
type={type}
id={'default-{type}}
label={'Default radio'}
/>
<Form.Check
type={type}
id={'default-{type}''}
label={'Default checked radio'}
checked
/>
</div>
))}
</Form>
Disabled
<Form>
{['radio'].map((type) => (
<div key={default-{type}} className="mb-3">
<Form.Check
disabled
type={type}
label="Disabled radio"
id="Disabled radio"
/>
<Form.Check
disabled
type={type}
label="Disabled checked radio"
id="disable"
checked
/>
</div>
))}
</Form>
Switches
A switch has the markup of a custom checkbox but uses type="switch" to render a toggle switch. Switches also support the same customizable children as <FormCheck>.
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
/>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
checked
/>
</Form>
Disable Switches
A switch has the markup of a custom checkbox but uses the .form-switch class to render a toggle switch. Switches also support the disabled attribute.
<Form>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
disabled
/>
<Form.Check
type="switch"
id="custom-switch"
label="Check this switch"
checked
disabled
/>
</Form>