Overview

Radio buttons use the Form.Check with type prop as radio as a wrapper and adding custom prop. Custom checkbox and radio styles are achieved with a resourceful use of the :checked selector and :after pseudo elements.

Radios

API

Form

import Form from `@trimbleinc/modus-react-bootstrap/Form`
NameTypeDefaultDescription
ref
ReactRef

The Form ref will be forwarded to the underlying element, which means, unless it's rendered as a composite component, it will be a DOM node, when resolved.

as
elementType
<form>
inline
boolean
false

Display the series of labels, form controls, and buttons on a single horizontal row

validated
boolean

Mark a form as having been validated. Setting it to true will toggle any validation styles on the forms elements.

bsPrefix
string
{'form'}

Form.Group

import Form.Group from `@trimbleinc/modus-react-bootstrap/Form.Group`
NameTypeDefaultDescription
ref
ReactRef

The FormGroup ref will be forwarded to the underlying element. Unless the FormGroup is rendered as a composite component, it will be a DOM node, when resolved.

as
elementType
<div>
controlId
string

Sets id on <FormControl> and htmlFor on <FormGroup.Label>.

bsPrefix
string
'form-group'

Form.Check

import Form.Check from `@trimbleinc/modus-react-bootstrap/Form.Check`
NameTypeDefaultDescription
ref
ReactRef

The FormCheck ref will be forwarded to the underlying input element, which means it will be a DOM node, when resolved.

as
'input' | elementType
'input'

The underlying HTML element to use when rendering the FormCheck.

children
node

Provide a function child to manually handle the layout of the FormCheck's inner components.

<FormCheck>
  <FormCheck.Input isInvalid type={radio} />
  <FormCheck.Label>Allow us to contact you?</FormCheck.Label>
  <Feedback type="invalid">Yo this is required</Feedback>
</FormCheck>
custom
all(PropTypes.bool, ({ custom, id }) => custom && !id ? Error('Custom check controls require an id to work') : null, )

Use Bootstrap's custom form elements to replace the browser defaults

disabled
boolean
false

Disables the control.

feedback
node

A message to display when the input is in a validation state

feedbackTooltip
boolean
false

Display feedback as a tooltip.

id
string

A HTML id attribute, necessary for proper form accessibility. An id is recommended for allowing label clicks to toggle the check control.

This is required for custom check controls or when type="switch" due to how they are rendered.

inline
boolean
false

Groups controls horizontally with other FormChecks.

isInvalid
boolean
false

Manually style the input as invalid

isValid
boolean
false

Manually style the input as valid

label
node

Label for the control.

title
string
''

title attribute for the underlying FormCheckLabel.

type
'radio' | 'checkbox' | 'switch'
'checkbox'

The type of checkable.

bsPrefix
string
'form-check'
bsCustomPrefix
string
'custom-control'

A seperate bsPrefix used for custom controls

FormCheck.Input

import FormCheck.Input from `@trimbleinc/modus-react-bootstrap/FormCheck.Input`
NameTypeDefaultDescription
as
'input' | elementType
'input'

The underlying HTML element to use when rendering the FormCheckInput.

id
string

A HTML id attribute, necessary for proper form accessibility.

isInvalid
boolean
false

Manually style the input as invalid

isStatic
boolean

A convenience prop shortcut for adding position-static to the input, for correct styling when used without an FormCheckLabel

isValid
boolean
false

Manually style the input as valid

type
'radio' | 'checkbox'
'checkbox'

The type of checkable.

bsPrefix
string
'form-check-input'
bsCustomPrefix
string
'custom-control'

A seperate bsPrefix used for custom controls