Variants
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.
| Prop | Type | Required? | Default | Description |
|---|---|---|---|---|
| as | string | false | input | Used to switch between <input> and <textArea> element. (<input> by default). An elem of textarea will also add the bc-text-input--textarea class |
| isFullWidth | boolean | false | Used to display the element for full width available. | |
| isInvalid | boolean | false | Appends .bc-text-input--invalid | |
| isValid | boolean | false | Appends .bc-text-input--valid | |
| name | string | true | Used to pass the value when submitting a form. | |
| readOnly | React.InputHTMLAttributes<HTMLInputElement>['readonly'] | false | Appends .bc-text-input--readonly to the input element classNames and forwarded to base input element | |
| type | text | number | tel | email | password | url | false | text | Only allowed types for the input element |
| variant | code | number | false | Passing a variant will append .bc-text-input--${variant} to the input element | |
| visibility | internal | private | false | Append .bc-text-input--bugcrowd-internal or .bc-text-input--private respectively to the input element |
Extended types: React.InputHTMLAttributes<HTMLInputElement>
HTML
Last modified:
ℹ️ For ideal styling, group a <label> and its <input> together within a parent .bc-form__group.
Use for these types:
textnumbertelemailpasswordurl- and the
<textarea>element.
Using the correct input type
Use the correct <input> type if there is one, eg
passwordfor password fieldstelfor 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:
timedateanddatetime-localweekandmonth
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.
Design
Last modified:
The following variants are available:
| Variant | Purpose |
|---|---|
.bc-text-input--number | For input[type='number'] |
.bc-text-input--textarea | For <textarea> |
.bc-text-input--code | For monospaced font styles, when alphanumeric text input content benefits from differentiating characters. Do not chain with .bc-text-input--number. |
.bc-text-input--private | For inputs that have content visible only between 2 users |
.bc-text-input--bugcrowd-internal | For 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.
Accessibility
Last modified:
Rationale
Last modified:
See also
Last modified:
- Fixed Text Input (Forms)