Form.Control

A form control renders a space for user input (input or select). It can be decorated with leading or trailing elements, and have a floating label.

Prefer to use the Form.Control component inside a Form.Group. The Form.Group provides a context for the control to ensure accessibility requirements for labels and descriptions are met.

Note: extra props added to this component are passed as attributes to the underlying DOM node (input by default). See MDN for documentation on available input attributes or select attributes.

Usage with decorators and floating label

() => {
  const [value, setValue] = useState('');
  return (
    <Form.Group>
      <Form.Control
        leadingElement={<Icon src={FavoriteBorder} />}
        trailingElement={<Icon src={Verified} />}
        floatingLabel="What kind of cats?"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </Form.Group>
  );
}

() => {
  const [value, setValue] = useState('');
  return (
    <Form.Group>
      <Form.Control
        leadingElement={<Icon src={FavoriteBorder} />}
        trailingElement={<Icon src={Verified} />}
        floatingLabel="What kind of cats?"
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </Form.Group>
  );
}

Input types

() => {
  {/* start example state */}
  const [type, setType] = useState('default');
  {/* end example state */}

  const inputs = {
    default: (
      <>
        <h3>Default</h3>
        <Form.Group>
          <Form.Control
            value={value}
            onChange={handleChange}
            leadingElement={<Icon src={FavoriteBorder} />}
            floatingLabel="What kind of cats?"
          />
        </Form.Group>
      </>
    ),
    textarea: (<>
      <h3>Textarea</h3>
      <Form.Group>
        <Form.Control
          as="textarea"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="What kind of cats?"
        />
      </Form.Group>
    </>),
    select: (<>
      <h3>Select</h3>
      <Form.Group>
        <Form.Control
          as="select"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="What kind of cats?"
        >
          <option value="">Select a cat</option>
          <option>Persian cat</option>
          <option>British Shorthair</option>
          <option>Maine Coon</option>
          <option>Siamese cat</option>
        </Form.Control>
      </Form.Group>
    </>),
    password: (<>
      <h3>Password</h3>
      <Form.Group>
        <Form.Control
          type="password"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="Password cats?"
        />
      </Form.Group>
    </>),
    date: (<>
      <h3>Date picker</h3>
      <Form.Group>
        <Form.Control
          type="date"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="When cats?"
        />
      </Form.Group>
    </>),
    number: (<>
      <h3>Number</h3>
      <Form.Group>
        <Form.Control
          type="number"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="How many cats?"
        />
      </Form.Group>
    </>),
    time: (<>
      <h3>Time picker</h3>
      <Form.Group>
        <Form.Control
          type="time"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="Time cats?"
        />
      </Form.Group>
    </>),
  };
  const [value, setValue] = useState('');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: type, setValue: setType, options: Object.keys(inputs), name: 'Input type' },
        ]}
      />
      {/* end example form block */}
      
      {inputs[type]}
    </>
  );
}

() => {
  {/* start example state */}
  const [type, setType] = useState('default');
  {/* end example state */}

  const inputs = {
    default: (
      <>
        <h3>Default</h3>
        <Form.Group>
          <Form.Control
            value={value}
            onChange={handleChange}
            leadingElement={<Icon src={FavoriteBorder} />}
            floatingLabel="What kind of cats?"
          />
        </Form.Group>
      </>
    ),
    textarea: (<>
      <h3>Textarea</h3>
      <Form.Group>
        <Form.Control
          as="textarea"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="What kind of cats?"
        />
      </Form.Group>
    </>),
    select: (<>
      <h3>Select</h3>
      <Form.Group>
        <Form.Control
          as="select"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="What kind of cats?"
        >
          <option value="">Select a cat</option>
          <option>Persian cat</option>
          <option>British Shorthair</option>
          <option>Maine Coon</option>
          <option>Siamese cat</option>
        </Form.Control>
      </Form.Group>
    </>),
    password: (<>
      <h3>Password</h3>
      <Form.Group>
        <Form.Control
          type="password"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="Password cats?"
        />
      </Form.Group>
    </>),
    date: (<>
      <h3>Date picker</h3>
      <Form.Group>
        <Form.Control
          type="date"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="When cats?"
        />
      </Form.Group>
    </>),
    number: (<>
      <h3>Number</h3>
      <Form.Group>
        <Form.Control
          type="number"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="How many cats?"
        />
      </Form.Group>
    </>),
    time: (<>
      <h3>Time picker</h3>
      <Form.Group>
        <Form.Control
          type="time"
          value={value}
          onChange={handleChange}
          leadingElement={<Icon src={FavoriteBorder} />}
          floatingLabel="Time cats?"
        />
      </Form.Group>
    </>),
  };
  const [value, setValue] = useState('');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <>
      {/* start example form block */}
      <ExamplePropsForm
        inputs={[
          { value: type, setValue: setType, options: Object.keys(inputs), name: 'Input type' },
        ]}
      />
      {/* end example form block */}
      
      {inputs[type]}
    </>
  );
}

Textarea autoResize

autoResize prop allows input to be resized according to the content height.

<Form.Control
  as="textarea"
  autoResize
  floatingLabel="Write something long"
/>

<Form.Control
  as="textarea"
  autoResize
  floatingLabel="Write something long"
/>

Validation

() => {
  const [value, setValue] = useState('');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <>
      <Form.Group>
        <FormLabel>What kind of cats?</FormLabel>
        <Form.Control value={value} onChange={handleChange} />
      </Form.Group>

      <Form.Group isInvalid>
        <FormLabel>What kind of cats?</FormLabel>
        <Form.Control value={value} onChange={handleChange} />
      </Form.Group>

      <Form.Group isValid>
        <FormLabel>What kind of cats?</FormLabel>
        <Form.Control value={value} onChange={handleChange} />
      </Form.Group>
    </>
  );
}

() => {
  const [value, setValue] = useState('');
  const handleChange = (e) => setValue(e.target.value);
  return (
    <>
      <Form.Group>
        <FormLabel>What kind of cats?</FormLabel>
        <Form.Control value={value} onChange={handleChange} />
      </Form.Group>

      <Form.Group isInvalid>
        <FormLabel>What kind of cats?</FormLabel>
        <Form.Control value={value} onChange={handleChange} />
      </Form.Group>

      <Form.Group isValid>
        <FormLabel>What kind of cats?</FormLabel>
        <Form.Control value={value} onChange={handleChange} />
      </Form.Group>
    </>
  );
}

Sizes

() => {
  const [value, setValue] = useState('');
  return (
    <>
      <Form.Group size="sm">
        <Form.Control
          leadingElement={<Icon src={FavoriteBorder} />}
          trailingElement={<Icon src={Verified} />}
          floatingLabel="What kind of cats?"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </Form.Group>
      <Form.Group>
        <Form.Control
          leadingElement={<Icon src={FavoriteBorder} />}
          trailingElement={<Icon src={Verified} />}
          floatingLabel="What kind of cats?"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </Form.Group>
      <Form.Group size="lg">
        <Form.Control
          leadingElement={<Icon src={FavoriteBorder} />}
          trailingElement={<Icon src={Verified} />}
          floatingLabel="What kind of cats?"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </Form.Group>
    </>
  );
}

() => {
  const [value, setValue] = useState('');
  return (
    <>
      <Form.Group size="sm">
        <Form.Control
          leadingElement={<Icon src={FavoriteBorder} />}
          trailingElement={<Icon src={Verified} />}
          floatingLabel="What kind of cats?"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </Form.Group>
      <Form.Group>
        <Form.Control
          leadingElement={<Icon src={FavoriteBorder} />}
          trailingElement={<Icon src={Verified} />}
          floatingLabel="What kind of cats?"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </Form.Group>
      <Form.Group size="lg">
        <Form.Control
          leadingElement={<Icon src={FavoriteBorder} />}
          trailingElement={<Icon src={Verified} />}
          floatingLabel="What kind of cats?"
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </Form.Group>
    </>
  );
}

Theme Variables (SCSS)#

$input-padding-y:                       $input-btn-padding-y !default;
$input-padding-x:                       $input-btn-padding-x !default;
$input-font-family:                     $input-btn-font-family !default;
$input-font-size:                       $input-btn-font-size !default;
$input-font-weight:                     $font-weight-base !default;
$input-line-height:                     $input-btn-line-height !default;

$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
$input-font-size-sm:                    $input-btn-font-size-sm !default;
$input-line-height-sm:                  $input-btn-line-height-sm !default;

$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
$input-font-size-lg:                    $input-btn-font-size-lg !default;
$input-line-height-lg:                  $input-btn-line-height-lg !default;

$input-bg:                              $white !default;
$input-disabled-bg:                     theme-color("gray", "background") !default;

$input-color:                           theme-color("gray", "text") !default;
$input-border-color:                    $gray-500 !default;
$input-border-width:                    $input-btn-border-width !default;
$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;

$input-border-radius:                   $border-radius !default;
$input-border-radius-lg:                $border-radius-lg !default;
$input-border-radius-sm:                $border-radius-sm !default;

$input-focus-bg:                        $input-bg !default;
$input-focus-border-color:              $component-active-bg !default;
$input-focus-color:                     $input-color !default;
$input-focus-width:                     1px !default;
$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;

$input-placeholder-color:               theme-color("gray", "light-text") !default;
$input-plaintext-color:                 $body-color !default;

$input-height-border:                   $input-border-width * 2 !default;

$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{calc($input-padding-y / 2)}) !default;

$input-height:                          calc(
  #{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}
) !default;
$input-height-sm:                       calc(
  #{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}
) !default;
$input-height-lg:                       calc(
  #{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}
) !default;

$input-hover-width:                     1px !default;
$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$form-text-margin-top:                  .25rem !default;

$form-check-input-gutter:               1.25rem !default;
$form-check-input-margin-y:             .3rem !default;
$form-check-input-margin-x:             .25rem !default;

$form-check-inline-margin-x:            .75rem !default;
$form-check-inline-input-margin-x:      .3125rem !default;

$form-check-position-axis:              .375rem !default;
$form-check-focus-border-radius:        .0625rem !default;
$form-check-border-width:               .125rem !default;

$form-grid-gutter-width:                10px !default;
$form-group-margin-bottom:              1rem !default;

$input-group-addon-color:               $input-color !default;
$input-group-addon-bg:                  theme-color("gray", "background") !default;
$input-group-addon-border-color:        $input-border-color !default;

$custom-forms-transition:               background-color .15s ease-in-out,
  border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;

$custom-control-gutter:                 .5rem !default;
$custom-control-spacer-x:               1rem !default;
$custom-control-cursor:                 null !default;

$custom-control-indicator-size:         1.25rem !default;
$custom-control-indicator-bg:           $input-bg !default;

$custom-control-indicator-bg-size:      100% !default;
$custom-control-indicator-box-shadow:   $input-box-shadow !default;
$custom-control-indicator-border-color: $gray-700 !default;
$custom-control-indicator-border-width: 2px !default;

$custom-control-label-color:            null !default;
$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
$custom-control-label-disabled-color:           theme-color("gray", "light-text") !default;

$custom-control-indicator-checked-color:        $component-active-bg !default;
$custom-control-indicator-checked-bg:           $component-active-bg !default;
$custom-control-indicator-checked-disabled-bg:  rgba($primary, .5) !default;
$custom-control-indicator-checked-box-shadow:   none !default;
$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;

$custom-control-indicator-focus-box-shadow:     0 0 0 4px rgba(0, 0, 0, .1) !default;
$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;

$custom-control-indicator-active-color:         $component-active-color !default;
$custom-control-indicator-active-bg:            $component-active-bg !default;
$custom-control-indicator-active-box-shadow:    none !default;
$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
$custom-checkbox-indicator-border-radius:       0 !default;
$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z' fill='#{$custom-control-indicator-checked-color}'/></svg>"), "#", "%23") !default;

$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M21 3H3V21H21V3ZM17 13H7V11H17V13Z' fill='#{$custom-checkbox-indicator-indeterminate-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;

$custom-radio-indicator-border-radius:          50% !default;
$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;

$custom-switch-indicator-icon-off:              str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-bg}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-indicator-icon-on:               str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-active-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
$custom-switch-indicator-border-radius:         calc($custom-control-indicator-size / 2) !default;
$custom-switch-indicator-size:                  calc(
  #{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}
) !default;
$custom-switch-indicator-checked-bg:            theme-color("success") !default;

$custom-select-padding-y:           $input-padding-y !default;
$custom-select-padding-x:           $input-padding-x !default;
$custom-select-font-family:         $input-font-family !default;
$custom-select-font-size:           $input-font-size !default;
$custom-select-height:              $input-height !default;

// Extra padding to account for the presence of the background-image based indicator
$custom-select-indicator-padding:   1rem !default;
$custom-select-font-weight:         $input-font-weight !default;
$custom-select-line-height:         $input-line-height !default;
$custom-select-color:               $input-color !default;
$custom-select-disabled-color:      theme-color("gray", "light-text") !default;
$custom-select-bg:                  $input-bg !default;
$custom-select-disabled-bg:         theme-color("gray", "background") !default;
$custom-select-bg-size:             24px 24px !default; // In pixels because image dimensions
$custom-select-indicator-color:     theme-color("gray", "hover") !default;

$custom-select-indicator:           str-replace(url('data:image/svg+xml,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M16.59 8.58984L12 13.1698L7.41 8.58984L6 9.99984L12 15.9998L18 9.99984L16.59 8.58984Z" fill="#{$custom-select-indicator-color}"/></svg>'), "#", "%23") !default;

// Used so we can have multiple background elements (e.g., arrow and feedback icon)
$custom-select-background:          $custom-select-indicator no-repeat right
  $input-padding-y center / $custom-select-bg-size !default;

$custom-select-feedback-icon-padding-right: calc(
  (1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}
) !default;
$custom-select-feedback-icon-position:      center right
  ($custom-select-padding-x + $custom-select-indicator-padding) !default;
$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;

$custom-select-border-width:        $input-border-width !default;
$custom-select-border-color:        $input-border-color !default;
$custom-select-border-radius:       $border-radius !default;
$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;

$custom-select-focus-border-color:  $input-focus-border-color !default;
$custom-select-focus-width:         $input-focus-width !default;
$custom-select-focus-box-shadow:    $input-btn-focus-box-shadow !default;

$custom-select-padding-y-sm:        $input-padding-y-sm !default;
$custom-select-padding-x-sm:        $input-padding-x-sm !default;
$custom-select-font-size-sm:        $input-font-size-sm !default;
$custom-select-height-sm:           $input-height-sm !default;

$custom-select-padding-y-lg:        $input-padding-y-lg !default;
$custom-select-padding-x-lg:        $input-padding-x-lg !default;
$custom-select-font-size-lg:        $input-font-size-lg !default;
$custom-select-height-lg:           $input-height-lg !default;

$custom-range-track-width:          100% !default;
$custom-range-track-height:         .5rem !default;
$custom-range-track-cursor:         pointer !default;
$custom-range-track-bg:             theme-color("gray", "graphic") !default;
$custom-range-track-border-radius:  1rem !default;
$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;

$custom-range-thumb-width:                   1rem !default;
$custom-range-thumb-height:                  $custom-range-thumb-width !default;
$custom-range-thumb-bg:                      $component-active-bg !default;
$custom-range-thumb-border:                  0 !default;
$custom-range-thumb-border-radius:           1rem !default;
$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
$custom-range-thumb-disabled-bg:             theme-color("gray", "default") !default;

$custom-file-height:                $input-height !default;
$custom-file-height-inner:          $input-height-inner !default;
$custom-file-focus-border-color:    $input-focus-border-color !default;
$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
$custom-file-disabled-bg:           $input-disabled-bg !default;

$custom-file-padding-y:             $input-padding-y !default;
$custom-file-padding-x:             $input-padding-x !default;
$custom-file-line-height:           $input-line-height !default;
$custom-file-font-family:           $input-font-family !default;
$custom-file-font-weight:           $input-font-weight !default;
$custom-file-color:                 $input-color !default;
$custom-file-bg:                    $input-bg !default;
$custom-file-border-width:          $input-border-width !default;
$custom-file-border-color:          $input-border-color !default;
$custom-file-border-radius:         $input-border-radius !default;
$custom-file-box-shadow:            $input-box-shadow !default;
$custom-file-button-color:          $custom-file-color !default;
$custom-file-button-bg:             $input-group-addon-bg !default;
$custom-file-text: (
  en: "Browse"
) !default;

// Form validation

$form-feedback-margin-top:          $form-text-margin-top !default;
$form-feedback-font-size:           $small-font-size !default;
$form-feedback-valid-color:         theme-color("success") !default;
$form-feedback-invalid-color:       theme-color("danger") !default;

$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;

$form-validation-states: () !default;
// stylelint-disable-next-line scss/dollar-variable-default
$form-validation-states: map-merge(
  (
    "valid": (
      "color": $form-feedback-valid-color,
      "icon": $form-feedback-icon-valid
    ),
    "invalid": (
      "color": $form-feedback-invalid-color,
      "icon": $form-feedback-icon-invalid
    ),
  ),
  $form-validation-states
);

// Form tooltips must come after regular tooltips
$form-feedback-tooltip-padding-y:     .25rem !default;
$form-feedback-tooltip-padding-x:     .5rem !default;
$form-feedback-tooltip-font-size:     $font-size-sm !default;
$form-feedback-tooltip-line-height:   $line-height-base !default;
$form-feedback-tooltip-opacity:       .9 !default;
$form-feedback-tooltip-border-radius: $border-radius !default;

FormControl Props API

className string Required
Specifies class name to append to the base element.
as elementType Required
Specifies base element for the control component.
Default'input'
onChange func Required
Specifies function that is triggered on input value change.
defaultValue string Required | number Required Required
Specifies default value of the input component.
value string Required | number Required Required
Specifies current value of the input component.
id string Required
Specifies id of the control component.
controlClassName string Required
Specifies class name for the control component.
size enum Required'sm' | 'lg'
Specifies size for the control component.
leadingElement node Required
Specifies leading element to display for the input component.
trailingElement node Required
Specifies trailing element to display for the input component.
floatingLabel node Required
Specifies floating label to display for the input component.
plaintext bool Required
Specifies whether to render input as plain text.
Defaultfalse
isValid bool Required
Specifies whether to display control in valid state, this affects styling.
isInvalid bool Required
Specifies whether to display control in invalid state, this affects styling.
autoResize bool Required
Only for as="textarea". Specifies whether the input can be resized according to the height of content.
Defaultfalse

Paragon Design System

Form.Control

Usage with decorators and floating label

Input types

Textarea autoResize

Validation

Sizes

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Form.Control

Usage with decorators and floating label#

Input types#

Textarea autoResize#

Validation#

Sizes#

Theme Variables (SCSS)#

Guides

Foundations

PlaygroundBeta

Components

Buttonlike

Choreography

Content

Forms

Forms (deprecated)

Hooks

Imagery & Iconography

Layout

Navigation

Overlays

Status & metadata

Table

All components (A-Z)

Usage with decorators and floating label

Input types

Textarea autoResize

Validation

Sizes