+ Add the disabled attribute and the associated{' '}
+ <label>s are automatically styled to match with a
+ lighter color to help indicate the input's state.
+
+ Add the disabled attribute and the associated{' '}
+ <label>s are automatically styled to match with a
+ lighter color to help indicate the input's state.
+
+ A switch has the markup of a custom checkbox but uses the{' '}
+ switch boolean properly to render a toggle switch. Switches
+ also support the disabled attribute.
+
+ By default, any number of checkboxes and radios that are immediate sibling will be + vertically stacked and appropriately spaced. +
+
+ Group checkboxes or radios on the same horizontal row by adding{' '}
+ inline boolean property to any{' '}
+ <CFormCheck>.
+
+ Remember to still provide some form of accessible name for assistive technologies (for
+ instance, using aria-label).
+
+ Create button-like checkboxes and radio buttons by using{' '}
+ button boolean property on the{' '}
+ <CFormCheck> component. These toggle buttons can
+ further be grouped in a button group if needed.
+
+ Different variants of button, such at the various outlined styles, are supported. +
+
+ Set heights using size property like{' '}
+ size="lg" and size="sm".
+
+ Add the disabled boolean attribute on an input to give it a
+ grayed out appearance and remove pointer events.
+
+ Add the readOnly boolean attribute on an input to prevent
+ modification of the input's value. Read-only inputs appear lighter (just like disabled
+ inputs), but retain the standard cursor.
+
+ If you want to have <input readonly> elements in your
+ form styled as plain text, use the plainText boolean
+ property to remove the default form field styling and preserve the correct margin and
+ padding.
+
+ Place one add-on or button on either side of an input. You may also place one on both
+ sides of an input. Remember to place <CFormLabel>s
+ outside the input group.
+
+ Input groups wrap by default via flex-wrap: wrap in order
+ to accommodate custom form field validation within an input group. You may disable
+ this with .flex-nowrap.
+
+ Add the relative form sizing classes to the{' '}
+ <CInputGroup> itself and contents within will
+ automatically resize—no need for repeating the form control size classes on each
+ element.
+
+ + Sizing on the individual input group elements isn't supported. + +
++ Place any checkbox or radio option within an input group's addon instead of text. +
+
+ While multiple <CFormControl>s are supported
+ visually, validation styles are only available for input groups with a single{' '}
+ <CFormControl>.
+
+ Multiple add-ons are supported and can be mixed with checkbox and radio input + versions.. +
++ Multiple add-ons are supported and can be mixed with checkbox and radio input + versions.. +
++ More complex forms can be built using our grid classes. Use these for form layouts + that require multiple columns, varied widths, and additional alignment options. +
++ By adding{' '} + + gutter modifier classes + + , you can have control over the gutter width in as well the inline as block direction. +
++ More complex layouts can also be created with the grid system. +
+
+ Create horizontal forms with the grid by adding the .row{' '}
+ class to form groups and using the .col-*-* classes to
+ specify the width of your labels and controls. Be sure to add{' '}
+ .col-form-label to your{' '}
+ <CFormLabel>s as well so they're vertically centered
+ with their associated form controls.
+
+ At times, you maybe need to use margin or padding utilities to create that perfect
+ alignment you need. For example, we've removed the{' '}
+ padding-top on our stacked radio inputs label to better
+ align the text baseline.
+
+ Be sure to use .col-form-label-sm or{' '}
+ .col-form-label-lg to your{' '}
+ <CFormLabel>s or{' '}
+ <legend>s to correctly follow the size of{' '}
+ .form-control-lg and{' '}
+ .form-control-sm.
+
+ As shown in the previous examples, our grid system allows you to place any number of{' '}
+ <CCol>s within a{' '}
+ <CRow>. They'll split the available width equally
+ between them. You may also pick a subset of your columns to take up more or less
+ space, while the remaining <CCol>s equally split the
+ rest, with specific column classes like <CCol sm="7">
+ .
+
+ The example below uses a flexbox utility to vertically center the contents and changes{' '}
+ <CCol> to{' '}
+ <CCol xs="auto"> so that your columns only take up as
+ much space as needed. Put another way, the column sizes itself based on the contents.
+
+ You can then remix that once again with size-specific column classes. +
+
+ Use the <CCol xs="auto"> class to create horizontal
+ layouts. By adding{' '}
+
+ gutter modifier classes
+
+ , we will have gutters in horizontal and vertical directions. The{' '}
+ .align-items-center aligns the form elements to the middle,
+ making the <CFormCheck> align properly.
+
+ Create custom <input type="range"> controls with{' '}
+ <CFormControl>.
+
+ Add the disabled boolean attribute on an input to give it a
+ grayed out appearance and remove pointer events.
+
+ Range inputs have implicit values for min and{' '}
+ max—0 and{' '}
+ 100, respectively. You may specify new values for those
+ using the min and max{' '}
+ attributes.
+
+ 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".
+
+ You may also choose from small and large custom selects to match our similarly sized + text inputs. +
+
+ The multiple attribute is also supported:
+
+ As is the htmlSize property:
+
+ Add the disabled boolean attribute on a select to give it a
+ grayed out appearance and remove pointer events.
+
+ For custom CoreUI form validation messages, you'll need to add the{' '}
+ noValidate boolean property to your{' '}
+ <CForm>. This disables the browser default feedback
+ tooltips, but still provides access to the form validation APIs in JavaScript. Try to
+ submit the form below; our JavaScript will intercept the submit button and relay
+ feedback to you. When attempting to submit, you'll see the{' '}
+ :invalid and :valid styles
+ applied to your form controls.
+
+ Custom feedback styles apply custom colors, borders, focus styles, and background + icons to better communicate feedback.{' '} +
++ Not interested in custom validation feedback messages or writing JavaScript to change + form behaviors? All good, you can use the browser defaults. Try submitting the form + below. Depending on your browser and OS, you'll see a slightly different style of + feedback. +
++ While these feedback styles cannot be styled with CSS, you can still customize the + feedback text through JavaScript. +
+
+ We recommend using client-side validation, but in case you require server-side
+ validation, you can indicate invalid and valid form fields with{' '}
+ isInvalid and isValid boolean
+ properties.
+
+ For invalid fields, ensure that the invalid feedback/error message is associated with
+ the relevant form field using aria-describedby (noting that
+ this attribute allows more than one id to be referenced, in
+ case the field already points to additional form text).
+
+ Validation styles are available for the following form controls and components: +
+<CFormControl>s
+ <CFormSelect>s
+ <CFormCheck>s
+
+ If your form layout allows it, you can swap the text for the tooltip to display
+ validation feedback in a styled tooltip. Be sure to have a parent with{' '}
+ position: relative on it for tooltip positioning. In the
+ example below, our column classes have this already, but your project may require an
+ alternative setup.
+