Text input

Last modified:

Text inputs provide styles for many text-based `<input>` types.


Example of Text input - default

<BcTextInput name='text-inside' aria-label='A string of text that will be the accessible name for the text input' value='Sailor' onChange={() => { }} />

React documentation

Last modified:

The <input> tag specifies an input field where the user can enter data.

asstringfalseinputUsed to switch between <input> and <textArea> element. (<input> by default). An elem of textarea will also add the bc-text-input--textarea class
isFullWidthbooleanfalseUsed to display the element for full width available.
isInvalidbooleanfalseAppends .bc-text-input--invalid
isValidbooleanfalseAppends .bc-text-input--valid
namestringtrueUsed to pass the value when submitting a form.
readOnlyReact.InputHTMLAttributes<HTMLInputElement>['readonly']falseAppends .bc-text-input--readonly to the input element classNames and forwarded to base input element
typetext | number | tel | email | password | urlfalsetextOnly allowed types for the input element
variantcode | numberfalsePassing a variant will append .bc-text-input--${variant} to the input element
visibilityinternal | privatefalseAppend .bc-text-input--bugcrowd-internal or .bc-text-input--private respectively to the input element

Extended types: React.InputHTMLAttributes<HTMLInputElement>


Last modified:

ℹ️ For ideal styling, group a <label> and its <input> together within a parent .bc-form__group.

Use for these types:

  • text
  • number
  • tel
  • email
  • password
  • url
  • and the <textarea> element.

Using the correct input type

Use the correct <input> type if there is one, eg

  • password for password fields
  • tel for phone numbers

Use <textarea> for addresses when not using a Javascript library (eg Google Places autocomplete address form).

Number variant

The number variant ensures that we display numbers in input field using tabular nums font.

This variant adds .bc-text-input--number to the classNames passed to the input element.

If you pass number or tel to the type props, this will also append the .bc-text-input--number class by default.

Unsupported input types

Input types in HTML5 have been expanded, but due to poor and inconsistent browser support avoid using:

  • time
  • date and datetime-local
  • week and month

When IE11 support is expanded or our browser support matrix is updated these may become viable.

Note that datetime is obsolete.

Input form validation

Usage of the correct type will allow for client-side form validation without requiring Javascript.

For example, when an invalid email address is entered as the value into an input with a type of email, the :invalid attribute is applied.

Client-side HTML5 form validation is not a replacement for server-side input sanitization.


Last modified:

The following variants are available:

.bc-text-input--numberFor input[type='number']
.bc-text-input--textareaFor <textarea>
.bc-text-input--codeFor monospaced font styles, when alphanumeric text input content benefits from differentiating characters. Do not chain with .bc-text-input--number.
.bc-text-input--privateFor inputs that have content visible only between 2 users
.bc-text-input--bugcrowd-internalFor inputs that have content visible only to the Bugcrowd team

:valid and :invalid styling

Styles for valid/invalid inputs are currently not applied to inputs with the :valid/:invalid attributes. Instead, they are available as BEM class variants (.bc-text-input--valid and .bc-text-input--invalid).

‘readonly’ disabled usage

Apply the .bc-text-input--readonly variant on:

  • Text input fields that could shortly become editable (eg via an edit mode button)
  • Block-level user-defined data points being referenced at later stages in a form

Do not use the .bc-text-input--readonly variant inputs that a user can directly interact with.


Last modified:


Last modified:

See also

Last modified:

  • Fixed Text Input (Forms)