Overview

Create custom range with <Form.Control type="range" custom />

Only IE and Firefox currently support “filling” in their track from the left of the thumb so only those browsers show that styling.

Basic range

Defining min and max

Range inputs have implicit values for min and max -0 and 100, respectfully. You may specify new values for those using the min and max attributes.

Defining steps

By default, range inputs “snap” to integer values. To change this, you can specify a step value. In the example below, we double the number of steps by using step="0.5".

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.Label

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

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

as
elementType
<label>

Set a custom element for this component

column
boolean | 'sm' | 'lg'
false

Renders the FormLabel as a <Col> component (accepting all the same props), as well as adding additional styling for horizontal forms.

htmlFor
string

Uses controlId from <FormGroup> if not explicitly specified.

srOnly
boolean
false

Hides the label visually while still allowing it to be read by assistive technologies.

bsPrefix
string
'form-label'

Form.Control

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

The FormControl ref will be forwarded to the underlying input element, which means unless as is a composite component, it will be a DOM node, when resolved.

as
'input' | 'textarea' | 'select' | elementType
'input'

The underlying HTML element to use when rendering the FormControl.

custom
boolean

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

disabled
boolean

Make the control disabled

htmlSize
number

The size attribute of the underlying HTML element. Specifies the visible width in characters if as is 'input'. Specifies the number of visible options if as is 'select'.

id
string

Uses controlId from <FormGroup> if not explicitly specified.

isInvalid
boolean
false

Add "invalid" validation styles to the control and accompanying label

isValid
boolean
false

Add "valid" validation styles to the control

onChange
function

A callback fired when the value prop changes

plaintext
boolean

Render the input as plain text. Generally used along side readOnly.

readOnly
boolean

Make the control readonly

size
'sm' | 'lg'

Input size variants

type
string

The HTML input type, which is only relevant if as is 'input' (the default).

value
string | arrayOf | number
controlled by: onChange, initial prop: defaultValue

The value attribute of underlying input

bsPrefix
string
{'form-control'}
bsCustomPrefix
string
'custom'

A seperate bsPrefix used for custom controls