Form.Autosuggest

Form auto-suggest enables users to manually select or type to find matching options to partial text input.

Basic Usage

Show editable code example

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

() => {
  const [value, setValue] = useState({});
  const [isValueRequired, setIsValueRequired] = useState(false);
  const [isSelectionRequired, setIsSelectionRequired] = useState(false);
  const [hasCustomValidation, setHasCustomValidation] = useState(false);

  const hasCustomError = () => (hasCustomValidation ? value.selectionId !== 'c-option-id' : false);

  const autosuggestRef = useRef();
  const forceUpdateErrorState = () => {
    autosuggestRef.current.updateErrorStateAndErrorMessage();
  };

  return (
    <>
      <Form.Group>
        <Form.Label>
          <h4>Programming language</h4>
        </Form.Label>
        <Form.Autosuggest
          ref={autosuggestRef}
          aria-label="form autosuggest"
          helpMessage="Select language"
          value={value}
          onChange={(v) => setValue(v)}
          isValueRequired={isValueRequired}
          valueRequiredErrorMessageText="Error: value required"
          isSelectionRequired={isSelectionRequired}
          selectionRequiredErrorMessageText="Error: selection required"
          hasCustomError={hasCustomError()}
          customErrorMessageText="Error: selected language less than 50 years old"
        >
          <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
          <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
          <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
          <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
        </Form.Autosuggest>
      </Form.Group>
      <Form.Group>
        <Form.CheckboxSet isInline>
          <Form.Checkbox checked={isValueRequired} onChange={e => setIsValueRequired(e.target.checked)}>Value Required</Form.Checkbox>
          <Form.Checkbox checked={isSelectionRequired} onChange={e => setIsSelectionRequired(e.target.checked)}>Selection Required</Form.Checkbox>
          <Form.Checkbox checked={hasCustomValidation} onChange={e => setHasCustomValidation(e.target.checked)}>Custom Validation</Form.Checkbox>
        </Form.CheckboxSet>
      </Form.Group>
      <Collapsible styling="basic" title="Value details">
        <Row>
          <Col xs={3}><pre>userProvidedText:</pre></Col>
          <Col><pre>{value.userProvidedText}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionValue:</pre></Col>
          <Col><pre>{value.selectionValue}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionId:</pre></Col>
          <Col><pre>{value.selectionId}</pre></Col>
        </Row>
      </Collapsible>
      <Collapsible styling="basic" title="External modification">
        <Form.Group className="mb-3">
          <Form.Label>User provided text</Form.Label>
          <Form.Control
            onChange={(e) => setValue({
              userProvidedText: e.target.value,
              selectionValue: '',
              selectionId: '',
            })}
            value={value.userProvidedText}
          />
        </Form.Group>
        <Button onClick={forceUpdateErrorState}>Trigger validation</Button>
      </Collapsible>
    </>
  );
};

() => {
  const [value, setValue] = useState({});
  const [isValueRequired, setIsValueRequired] = useState(false);
  const [isSelectionRequired, setIsSelectionRequired] = useState(false);
  const [hasCustomValidation, setHasCustomValidation] = useState(false);

  const hasCustomError = () => (hasCustomValidation ? value.selectionId !== 'c-option-id' : false);

  const autosuggestRef = useRef();
  const forceUpdateErrorState = () => {
    autosuggestRef.current.updateErrorStateAndErrorMessage();
  };

  return (
    <>
      <Form.Group>
        <Form.Label>
          <h4>Programming language</h4>
        </Form.Label>
        <Form.Autosuggest
          ref={autosuggestRef}
          aria-label="form autosuggest"
          helpMessage="Select language"
          value={value}
          onChange={(v) => setValue(v)}
          isValueRequired={isValueRequired}
          valueRequiredErrorMessageText="Error: value required"
          isSelectionRequired={isSelectionRequired}
          selectionRequiredErrorMessageText="Error: selection required"
          hasCustomError={hasCustomError()}
          customErrorMessageText="Error: selected language less than 50 years old"
        >
          <Form.AutosuggestOption id="javascript-option-id">JavaScript</Form.AutosuggestOption>
          <Form.AutosuggestOption id="python-option-id">Python</Form.AutosuggestOption>
          <Form.AutosuggestOption id="ruby-option-id">Ruby</Form.AutosuggestOption>
          <Form.AutosuggestOption id="c-option-id">C</Form.AutosuggestOption>
        </Form.Autosuggest>
      </Form.Group>
      <Form.Group>
        <Form.CheckboxSet isInline>
          <Form.Checkbox checked={isValueRequired} onChange={e => setIsValueRequired(e.target.checked)}>Value Required</Form.Checkbox>
          <Form.Checkbox checked={isSelectionRequired} onChange={e => setIsSelectionRequired(e.target.checked)}>Selection Required</Form.Checkbox>
          <Form.Checkbox checked={hasCustomValidation} onChange={e => setHasCustomValidation(e.target.checked)}>Custom Validation</Form.Checkbox>
        </Form.CheckboxSet>
      </Form.Group>
      <Collapsible styling="basic" title="Value details">
        <Row>
          <Col xs={3}><pre>userProvidedText:</pre></Col>
          <Col><pre>{value.userProvidedText}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionValue:</pre></Col>
          <Col><pre>{value.selectionValue}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionId:</pre></Col>
          <Col><pre>{value.selectionId}</pre></Col>
        </Row>
      </Collapsible>
      <Collapsible styling="basic" title="External modification">
        <Form.Group className="mb-3">
          <Form.Label>User provided text</Form.Label>
          <Form.Control
            onChange={(e) => setValue({
              userProvidedText: e.target.value,
              selectionValue: '',
              selectionId: '',
            })}
            value={value.userProvidedText}
          />
        </Form.Group>
        <Button onClick={forceUpdateErrorState}>Trigger validation</Button>
      </Collapsible>
    </>
  );
};

Loading state

Show editable code example

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

() => {
  const [userProvidedText, setUserProvidedText] = useState('');
  const [selectionValue, setSelectionValue] = useState('');
  const [selectionId, setSelectionId] = useState('');
  const [data, setData] = useState([]);
  const [showLoading, setShowLoading] = useState(false);

  useEffect(() => {
    setShowLoading(true);
    fetch('https://api.sampleapis.com/coffee/hot')
      .then(data => data.json())
      .then(items => {
        setTimeout(() => {
          setData(items);
          setShowLoading(false);
        }, 1500);
      });
  }, []);

  const searchCoffee = (title, id) => {
    if (!id) {
      setShowLoading(true);
    }
    fetch('https://api.sampleapis.com/coffee/hot')
      .then(data => data.json())
      .then(items => setTimeout(() => {
        const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
        setShowLoading(false);
        if (filteredCoffee) { return filteredCoffee; }
        return { ...title, filteredCoffee };
      }, 1500));
  };

  const valueChanged = (value) => {
    if (userProvidedText !== value.userProvidedText) {
      searchCoffee(value.userProvidedText, value.selectionId);
    }
    setUserProvidedText(value.userProvidedText);
    setSelectionValue(value.selectionValue);
    setSelectionId(value.selectionId);
  };

  return (
    <>
      <Form.Group>
        <Form.Label>
          <h4>Café API</h4>
        </Form.Label>
        <Form.Autosuggest
          isLoading={showLoading}
          placeholder="This is placeholder"
          screenReaderText="Loading..."
          onChange={valueChanged}
        >
          {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
        </Form.Autosuggest>
      </Form.Group>
      <Collapsible styling="basic" title="Value details">
        <Row>
          <Col xs={3}><pre>userProvidedText:</pre></Col>
          <Col><pre>{userProvidedText}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionValue:</pre></Col>
          <Col><pre>{selectionValue}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionId:</pre></Col>
          <Col><pre>{selectionId}</pre></Col>
        </Row>
      </Collapsible>
    </>
  );
};

() => {
  const [userProvidedText, setUserProvidedText] = useState('');
  const [selectionValue, setSelectionValue] = useState('');
  const [selectionId, setSelectionId] = useState('');
  const [data, setData] = useState([]);
  const [showLoading, setShowLoading] = useState(false);

  useEffect(() => {
    setShowLoading(true);
    fetch('https://api.sampleapis.com/coffee/hot')
      .then(data => data.json())
      .then(items => {
        setTimeout(() => {
          setData(items);
          setShowLoading(false);
        }, 1500);
      });
  }, []);

  const searchCoffee = (title, id) => {
    if (!id) {
      setShowLoading(true);
    }
    fetch('https://api.sampleapis.com/coffee/hot')
      .then(data => data.json())
      .then(items => setTimeout(() => {
        const filteredCoffee = items.filter(res => res.title.toLowerCase().includes(title.toLowerCase()));
        setShowLoading(false);
        if (filteredCoffee) { return filteredCoffee; }
        return { ...title, filteredCoffee };
      }, 1500));
  };

  const valueChanged = (value) => {
    if (userProvidedText !== value.userProvidedText) {
      searchCoffee(value.userProvidedText, value.selectionId);
    }
    setUserProvidedText(value.userProvidedText);
    setSelectionValue(value.selectionValue);
    setSelectionId(value.selectionId);
  };

  return (
    <>
      <Form.Group>
        <Form.Label>
          <h4>Café API</h4>
        </Form.Label>
        <Form.Autosuggest
          isLoading={showLoading}
          placeholder="This is placeholder"
          screenReaderText="Loading..."
          onChange={valueChanged}
        >
          {data.map((item, index) => <Form.AutosuggestOption key={index}>{item.title}</Form.AutosuggestOption>)}
        </Form.Autosuggest>
      </Form.Group>
      <Collapsible styling="basic" title="Value details">
        <Row>
          <Col xs={3}><pre>userProvidedText:</pre></Col>
          <Col><pre>{userProvidedText}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionValue:</pre></Col>
          <Col><pre>{selectionValue}</pre></Col>
        </Row>
        <Row>
          <Col xs={3}><pre>selectionId:</pre></Col>
          <Col><pre>{selectionId}</pre></Col>
        </Row>
      </Collapsible>
    </>
  );
};

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#

FormAutosuggest Props API

arrowKeyNavigationSelector string
Specifies the CSS selector string that indicates to which elements the user can navigate using the arrow keys
Default'a:not(:disabled),li:not(:disabled, .btn-icon),input:not(:disabled)'
ignoredArrowKeysNames string[]
Specifies ignored hook keys.
Default['ArrowRight', 'ArrowLeft']
isLoading bool
Specifies loading state.
Defaultfalse
className string
Specifies class name to append to the base element.
Defaultnull
floatingLabel string
Specifies floating label to display for the input component.
Defaultnull
onChange func
Specifies onChange event handler.
Defaultnull
helpMessage string
Specifies help information for the user.
Default''
placeholder string
Specifies the placeholder text for the input.
Default''
value shape {
userProvidedText: string,
selectionValue: string,
selectionId: string,
}
Specifies values for the input.
Defaultnull
isValueRequired bool
Specifies if empty values trigger an error state
Defaultfalse
valueRequiredErrorMessageText requiredWhen(PropTypes.string, 'isValueRequired')
Informs user they must input a value.
Defaultnull
isSelectionRequired bool
Specifies if freeform values trigger an error state
Defaultfalse
selectionRequiredErrorMessageText requiredWhen(PropTypes.string, 'isSelectionRequired')
Informs user they must make a selection.
Defaultnull
hasCustomError bool
Specifies the control is in a consumer provided error state
Defaultfalse
customErrorMessageText requiredWhen(PropTypes.string, 'hasCustomError')
Informs user of other errors.
Defaultnull
name string
Specifies the name of the base input element.
Default'form-autosuggest'
readOnly bool
Selected list item is read-only.
Defaultfalse
children node
Specifies the content of the FormAutosuggest.
Defaultnull
screenReaderText string
Specifies the screen reader text
Default'loading'

FormAutosuggestOption Props API

className string
Specifies class name to append to the base element.
Defaultnull
children string
Specifies the text-content of the FormAutosuggestOption.
Defaultnull
onClick func
A click handler for the FormAutosuggestOption
Defaultnull

Usage Insights#

FormAutosuggest

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	1
	frontend-app-support-tools	21.13.1	2

FormAutosuggestOption

	Project Name	Paragon Version	Instance Count
	frontend-app-course-authoring	22.8.1	1
	frontend-app-support-tools	21.13.1	4

Edit this page Leave feedback

Paragon Design System

Theme

Form.Autosuggest

Basic Usage

Loading state

Theme Variables (SCSS)#

Props API#

Usage Insights#

FormAutosuggest

FormAutosuggestOption

All components (A-Z)

Theme

Form.Autosuggest

Basic Usage#

Loading state#

Theme Variables (SCSS)#

Props API#

Usage Insights#

FormAutosuggest

FormAutosuggestOption

All components (A-Z)

Basic Usage

Loading state