Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Input

Version 9.1.2GithubStorybook

An Input is a form element that lets users enter one of various types of text on a single line.

Installation

Installation page anchor
yarn add @twilio-paste/input - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Input} from '@twilio-paste/core/input';
import {Label} from '@twilio-paste/core/label';
import {HelpText} from '@twilio-paste/core/help-text';

const Component = () => (
  <>
    <Label htmlFor="foo" required>
      foo
    </Label>
    <Input aria-describedby="foo_text" id="foo" name="foo" type="text" placeholder="foo" onChange={FOO} required />
    <HelpText id="foo_text">Please enter some text</HelpText>
  </>
);

Props

Props page anchor

Input

Input page anchor

type RequiredRequired

Sets the type of the input.

Type
InputBoxTypes

cursor

Type
| Cursor | (Cursor | null | undefined)[] | { [x: string]: Cursor | undefined; [x: number]: Cursor | undefined }

disabled

Disables the input.

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider.

Type
string
Default
'INPUT'

hasError

Sets the input to an error state.

Type
boolean

height

Type
never

i18nStepDownLabel

Provides an accessible label for the decrement button on inputs of type "number" when using non-English languages.

Type
string

i18nStepUpLabel

Provides an accessible label for the increment button on inputs of type "number" when using non-English languages.

Type
string

id

Sets the id of the input. Should match the htmlFor of Label.

Type
string

insertAfter

Used to add a suffix to an input. Often used with text or an icon.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

insertBefore

Used to add a prefix to an input. Often used with text or an icon.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

name

Sets the name of the input.

Type
string

padding

Type
"space0"

paddingRight

Type
"space0" | "space10" | "space20" | "space30" | "space40" | "space50" | "space60" | "space70" | "space80" | "space90" | "space100" | "space110" | "space120" | "space130" | "space140" | ... 27 more ... | { ...; }

placeholder

Sets the placeholder of the input.

Type
string

readOnly

Sets the input to readonly.

Type
boolean

required

Sets the input as required.

Type
boolean

size

Type
never

style

Type
never

value

Sets the value of the input.

Type
string

variant

Type
InputVariants

width

Type
never