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

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  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

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  {/* 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.

Show editable code example

Any Paragon component or export may be added to the code example.

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

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

Validation

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  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

Show editable code example

Any Paragon component or export may be added to the code example.

() => {
  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-valid-color:     theme-color("success") !default;
$custom-control-indicator-checked-invalid-color:   theme-color("danger") !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-icon-valid-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-valid-color}'/></svg>"), "#", "%23") !default;
$custom-checkbox-indicator-icon-invalid-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-invalid-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-radio-indicator-icon-valid-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-valid-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
$custom-radio-indicator-icon-invalid-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-invalid-color}'/%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;
$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;
$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-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;
$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-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;
$form-autosuggest-icon-width:  2.4rem;
$form-autosuggest-icon-height:  $form-autosuggest-icon-width;
$form-autosuggest-spinner-width:  1.25rem;
$form-autosuggest-spinner-height:  $form-autosuggest-spinner-width;
$form-autosuggest-border-width:  .125rem;

Props API#

FormControl Props API

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

Usage Insights#

FormControl

	Project Name	Paragon Version	Instance Count
	credentials	19.19.1	1
	frontend-app-account	20.28.5	12
	frontend-app-admin-portal	20.26.3	38
	frontend-app-admin-portal	20.26.3	1
	frontend-app-authn	20.34.0	5
	frontend-app-communications	20.30.1	3
	frontend-app-course-authoring	20.32.0	11
	frontend-app-discussions	20.15.0	6
	frontend-app-gradebook	19.25.4	5
	frontend-app-gradebook	19.25.4	1
	frontend-app-learner-dashboard	20.32.0	2
	frontend-app-learner-dashboard	20.32.0	1
	frontend-app-learner-portal-enterprise	20.31.1	4
	frontend-app-library-authoring	20.30.1	8
	frontend-app-ora-grading	20.30.0	3
	frontend-app-payment	20.18.2	2
	frontend-app-profile	20.32.3	1
	frontend-app-publisher	20.28.5	5
	frontend-app-support-tools	20.26.0	9
	frontend-lib-content-components	20.32.0	24
	frontend-lib-special-exams	20.22.4	1
	prospectus	20.32.3	8
	prospectus	20.32.3	1

Contents

Usage with decorators and floating label
Input types
Textarea autoResize
Validation
Sizes
Theme Variables (SCSS)
Props API
Usage Insights