outlined-input

v4.9.10

v4.5.2

v3.9.2

STATUS

Passing

DOWNLOADS

36,464

LICENSE

MIT

VISIBILITY

Public

PUBLISHED

4 years ago

SIZE

30 KB

The label of the input.

React

2 contributors

Install outlined-input as a package?

Copied

npm i @bit/mui-org.material-ui.outlined-input

Set Bit as a scoped registryLearn more

npm config set '@bit:registry' https://node.bit.cloud

Component Example

React

Vue

Angular

React Native

Add dependency...

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';

modifieddraft

The label of the input. It is only used for layout. The actual labelling is handled by InputLabel. If specified labelWidth is ignored.

The width of the label. Is ignored if label is provided. Prefer label if the input label appears with a strike through.

If true, the outline is notched to accommodate the label.

Demos:

Text Fields

API:

OutlinedInput API
inherits InputBase API

Properties

Name	Type	Description
children	`node`	The content of the component.
classes	`object`	Override or extend the styles applied to the component. See CSS API below for more details.
className	`string`
label	`node`	The label.
labelWidth (required)	`number`	The width of the label.
notched (required)	`bool`	If `true`, the outline is notched to accommodate the label.
style	`object`
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.
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.
label	`node`	The label of the input. It is only used for layout. The actual labelling is handled by `InputLabel`. If specified `labelWidth` is ignored.
labelWidth	`number`	The width of the label. Is ignored if `label` is provided. Prefer `label` if the input label appears with a strike through.
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.
notched	`bool`	If `true`, the outline is notched to accommodate the label.
onChange	`function`	The event source of the callback. You can pull out the new value by accessing `event.target.value` (string).
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).
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.
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.