Skip to main content

Input

Import​

import { Input } from '@resultadosdigitais/tangram-components'

Properties​

disabled​

Typebool
Defaultfalse

Description​

When the value is true, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control.

error​

Typebool
Defaultfalse

Description​

When the value is true, changes the layout to demonstrate that an error has occurred.

success 🗑️​

Concerns
🗑️ Deprecated: Does not alter the appearance of the `Input`.
Typebool

Description​

required​

Typebool
Defaultfalse

Description​

Sets if some value is required.

placeholder​

Typestring

Description​

Text that appears in the form control when it has no value set.

prefix​

Typenode

Description​

Adds content as a prefix to the value.

suffix​

Typenode

Description​

Adds content as a suffix to the value.

defaultValue​

Typeany

Description​

The default value. Use when the component is not controlled.

value​

Typeany

Description​

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

width​

Typestring

Description​

Sets the Input custom width.

onChange​

Typefunc
Paramevent React.SyntheticEvent - The event source of the callback.

Description​

Callback fired when the value is changed.

<Input
  name="example"
  onChange={function (event) {
    const { name, value } = event.target;
    console.log(`The input's name is ${name} and the value is ${value}`);
  }}
/>

Feedback​

To report a problem, request new icons, request new component use cases, ask questions, share suggestions, or report bugs, get in touch through our Slack channel #tangram-design-system.