input-base

v4.9.10arrow_drop_down
v4.9.10
v4.5.2
v3.9.2
STATUS
Passing
DOWNLOADS
49,941
LICENSE
MIT
VISIBILITY
Public
PUBLISHED
4 years ago
SIZE
28 KB
This prop helps users to fill forms faster, especially on mobile devices.
2 contributors
Install input-base as a package?
Copied
npm i @bit/mui-org.material-ui.input-base
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.cloud
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
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 input element value. Use when the component is not controlled.

If true, the input element will be disabled.

End InputAdornment for this component.

If true, the input will indicate an error. This is normally obtained via context from FormControl.

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

The id of the input element.

The component used for the input element. Either a string to use a DOM element or a component.

Attributes applied to the input element.

Pass a ref to the input element.

If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.

If true, a textarea element will be rendered.

Name attribute of the input element.

Callback fired when the input is blurred.

Notice that the first argument (event) might be undefined.

Callback fired when the value is changed.

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

It prevents the user from changing the value of the field (not from interacting with the field).

If true, 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.

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

Start InputAdornment for this component.

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

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

InputBase contains as few styles as possible. It aims to be a simple building block for creating an input. It contains a load of style reset and some state logic. Demos:

API:

InputBase contains as few styles as possible. It aims to be a simple building block for creating an input. It contains a load of style reset and some state logic.

Properties
NameTypeDescription
aria-describedby
string
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.

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 input element value. Use when the component is not controlled.

disabled
bool

If true, the input element will be disabled.

endAdornment
node

End InputAdornment for this component.

error
bool

If true, the input will indicate an error. This is normally obtained via context from FormControl.

fullWidth
bool

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

id
string

The id of the input element.

inputComponent
elementType

The component used for the input element. Either a string to use a DOM element or a component.

inputProps
object

Attributes applied to the input element.

inputRef
custom

Pass a ref to the input element.

margin
'dense' | 'none'

If dense, will adjust vertical spacing. This is normally obtained via context from FormControl.

multiline
bool

If true, a textarea element will be rendered.

name
string

Name attribute of the input element.

onBlur
function

Callback fired when the input is blurred.

Notice that the first argument (event) might be undefined.

onChange
function

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

onClick
function
onFocus
function
onKeyDown
function
onKeyUp
function
placeholder
string

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

readOnly
bool

It prevents the user from changing the value of the field (not from interacting with the field).

renderSuffix
function
required
bool

If true, 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.

rowsMin
number | string

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

startAdornment
node

Start InputAdornment for this component.

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.

Help and resources