Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

text-field

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
1,323
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
5 months ago
SIZE
50 KB
This prop helps users to fill forms faster, especially on mobile devices
2 contributors
Install text-field as a package?
Copied
npm i @bit/mui-org.material-ui.text-field
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
React Native
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
modifieddraft
chevron_left
chevron_right

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it’s more like an autofill. You can learn more about it following the specification.

If true, the input element will be focused during the first mount.

The color of the component. It supports those theme colors that make sense for this component.

The default value of the input element.

If true, the input element will be disabled.

If true, the label will be displayed in an error state.

Props applied to the FormHelperText element.

If true, the input will take up the full width of its container.

The helper text content.

The id of the input element. Use this prop to make label and helperText accessible for screen readers.

Props applied to the InputLabel element.

Pass a ref to the input element.

The label content.

If dense or normal, will adjust vertical spacing of this and contained components.

If true, a textarea element will be rendered instead of an input.

Name attribute of the input element.

The short hint displayed in the input before the user enters a value.

If true, the label is displayed as required and the input element` will be required.

Number of rows to display when multiline option is set to true.

Maximum number of rows to display when multiline option is set to true.

Render a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.

Props applied to the Select element.

The size of the text field.

Type of the input element. It should be a valid HTML5 input type.

The value of the input element, required for a controlled component.

Callback fired when the value is changed.

The variant to use.

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

Attributes applied to the input element.

Callback fired when the value is changed.

The variant to use.

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

Attributes applied to the input element.

Callback fired when the value is changed.

The variant to use.

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

Attributes applied to the input element.

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

Advanced Configuration

It’s important to understand that the text field is a simple abstraction on top of the following components:

If you wish to alter the props applied to the input element, you can do so as follows:

const inputProps = {
  step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

For advanced cases, please look at the source of TextField by clicking on the “Edit this page” button above. Consider either:

  • using the upper case props for passing values directly to the components

  • using the underlying components directly as shown in the demos Demos:

  • Autocomplete

  • Pickers

  • Text Fields

API:

The TextField is a convenience wrapper for the most common cases (80%). It cannot be all things to all people, otherwise the API would grow out of control.

Advanced Configuration

It’s important to understand that the text field is a simple abstraction on top of the following components:

If you wish to alter the props applied to the input element, you can do so as follows:

const inputProps = {
step: 300,
};

return <TextField id="time" type="time" inputProps={inputProps} />;

For advanced cases, please look at the source of TextField by clicking on the “Edit this page” button above. Consider either:

  • using the upper case props for passing values directly to the components
  • using the underlying components directly as shown in the demos
Properties
NameTypeDescription
autoComplete
string

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it’s more like an autofill. You can learn more about it following the specification.

autoFocus
bool

If true, the input element will be focused during the first mount.

children
node
classes
object

Override or extend the styles applied to the component. See CSS API below for more details.

className
string
color
'primary' | 'secondary'

The color of the component. It supports those theme colors that make sense for this component.

defaultValue
any

The default value of the input element.

disabled
bool

If true, the input element will be disabled.

error
bool

If true, the label will be displayed in an error state.

FormHelperTextProps
object

Props applied to the FormHelperText element.

fullWidth
bool

If true, the input will take up the full width of its container.

helperText
node

The helper text content.

hiddenLabel
bool
id
string

The id of the input element. Use this prop to make label and helperText accessible for screen readers.

InputLabelProps
object

Props applied to the InputLabel element.

inputProps
object

Attributes applied to the input element.

InputProps
object

Props applied to the Input element. It will be a FilledInput, OutlinedInput or Input component depending on the variant prop value.

inputRef
custom

Pass a ref to the input element.

label
node

The label content.

margin
'dense' | 'none' | 'normal'

If dense or normal, will adjust vertical spacing of this and contained components.

multiline
bool

If true, a textarea element will be rendered instead of an input.

name
string

Name attribute of the input element.

onBlur
function
onChange
function

The event source of the callback. You can pull out the new value by accessing event.target.value (string).

onFocus
function
placeholder
string

The short hint displayed in the input before the user enters a value.

required
bool

If true, the label is displayed as required and the input element` will be required.

rows
number | string

Number of rows to display when multiline option is set to true.

rowsMax
number | string

Maximum number of rows to display when multiline option is set to true.

select
bool

Render a Select element while passing the Input element to Select as input parameter. If this option is set you must pass the options of the select as children.

SelectProps
object

Props applied to the Select element.

size
'medium' | 'small'

The size of the text field.

type
string

Type of the input element. It should be a valid HTML5 input type.

value
any

The value of the input element, required for a controlled component.

variant
'filled' | 'outlined' | 'standard'

The variant to use.