Skip to content

Latest commit

 

History

History

Checkbox

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
 
 
 
 
 
 
 
 
 
 
 
 

Checkbox

Renders a basic HTML checkbox.

Usage

<Checkbox
  label="My Checkbox"
  checked={true}
  value="bananas"
  onChange={(event) => {
    // consume event.target.value
  }}
/>

Usage with external label

The Checkbox component automatically renders a <label> when a label-prop is present but it is also possible to render it with an external label – as long as you provide a htmlFor-attribute for the label that matches the ID of the <Checkbox>.

  import { Checkbox, Label } from '@folio/stripes/components';

  <fieldset>
    <Label for="my-external-label">My external label</Label>
    <Checkbox id="my-external-label" inline />
  </fieldset>

Properties

Name type description default
autoFocus bool If this prop is true, will automatically focus on mount false
checked bool Marks the checkbox as checked (true) or unchecked (false) false
className string Adds a custom class on the root element undefined
labelInfo node Renders labelInfo in the checkbox label undefined
labelInfoClass string Adds a custom class name on the labelInfo element undefined
disabled bool Sets the checkbox as disabled false
error string, node Renders an error message below the checkbox undefined
fullWidth bool Styles input to a width of 100% of its container false
id string HTML id attribute applied to input - will also set the HtmlFor attribute of the <label>-element if a label-prop is set autogenerated
inline bool Renders the checkbox inline false
innerClass string Adds a custom class name for the inner element of the component undefined
inputRef object or func Supplies a ref to the rendered <input> undefined
label string, node Renders a label for the checkbox undefined
labelClass string Adds a custom class name on the <label>-element undefined
name string Sets the name of the input undefined
onBlur func Event handler for the input's onBlur event undefined
onChange func Event handler for the input's onChange event undefined
onFocus func Event handler for the input's onFocus event undefined
readOnly bool Renders the field as "read only" (focusable but non-interactive) false
required bool Sets the field as required false
value string Sets the selected value for the input undefined
vertical bool Renders the label vertically (above the checkbox) false
warning string, node Renders a warning message below the checkbox undefined

Use with React Final Form

  import { Field } from 'react-final-form';
  import { Checkbox } from '@folio/stripes/components';

  <Field
    component={Checkbox}
    type="checkbox"
    name="bananas"
    label="Bananas are green?"
  />

(When invoking a <Checkbox> as part of a react-final-form <Field>, it is necessary to explicitly pass type="checkbox" as well as component={Checkbox}, otherwise the form library does not understand how to interpret the value.)