Bugcrowd Design System

Bugcrowd Design System

Search/

Fixed text input

Last modified:

Text inputs with prepended or appended data points.

Back to top

Example of Fixed text input - default

<div class="bc-form">
  <div class="bc-form__group">
    <label
      class="bc-label"
      htmlFor="textin-fixed-dollars"
      id="fixed-textin-dollars-label"
    >
      How many Dollarydoos would you like?
    </label>
    <div
      class="bc-fixed-text-input bc-fixed-text-input--prepended bc-fixed-text-input--appended"
    >
      <span
        class="bc-fixed-text-input__prepend"
        id="fixed-textin-dollars-prepend"
      >
        $
      </span>
      <input
        aria-labelledby="fixed-textin-dollars-label fixed-textin-dollars-prepend fixed-textin-dollars-append"
        class="bc-text-input"
        id="textin-fixed-dollars"
        name="textin-fixed-dollars"
        type="number"
        value="9000"
      />
      <span
        class="bc-fixed-text-input__append"
        id="fixed-textin-dollars-append"
      >
        <abbr title="Australian Dollars"> AUD </abbr>
      </span>
    </div>
  </div>
</div>
Open in Playroom

React documentation

Last modified:

ℹ️ This feature doesn’t have a corresponding React component yet.

HTML

Last modified:

Add .bc-fixed-text-input to an <input> element inside a <form>.

The Fixed text input pattern extends Text inputs.

Use to further communicate to users what type or format of data is expected.

When building Fixed text inputs:

  • Set the correct <input> type
  • Give an ID to the <label> as well as any prepend or append and reference them on the <input> as aria-labelledby attributes.

Design

Last modified:

When using the --block variant, the nested .bc-text-input also requires its own .bc-text-input--block variant in addition.

Accessibility

Last modified:

Rationale

Last modified:

Careful usage of prepended or appended text inputs can aid users in understanding what format data is expected in.

Care must be taken in ensuring the prepends and appends do not look like interactive elements such as a <button>. It is for this reason we apply the disabled form styles to the prepends and appends to ensure these parts of this input pattern do not appear interactive when the text field itself is disabled.

See also

Last modified:

  • Text Inputs (Forms)