@asphalt-react/textfield v1.17.0

Textfield

Accept user input in a single line or multiple lines using the Textfield component.

Textfield suite also offers components specific to the nature of the input.

• Email
• Password
• URL
• Numeric
• Search
• Datefield
• Timefield

You can prefix or suffix an icon to better hint about the expected input. This works great for currency symbols or units. Textfields render at a fixed width. Though, if you want you can modify the width using the stretch prop.

All textfield components support HTML form validations and additional DOM attributes

To get access to the underlying DOM element, pass a React ref in the ref prop.

Usage

import Textfield, {
  Email,
  Search
} from "@asphalt-react/textfield"

  <Textfield/>
  <Email/>
  <Search/>

Qualifier

Qualifiers provide a hint about the expected content of the field. Accepts SVG or SVG wrapped React component and render it as an icon before or after the fields. By default or qualifierStart renders it before the field, use qualifierEnd to render it after. qualifierEnd takes over if both are applied.

Qualifiers are not supported in <Search/>

Checkout @asphalt-react/iconpack for officially supported icons.

Multiline

Apply multiline prop to accept multiple lines of text. Only Textfield supports multiline. Qualifiers don't work in multiline fields.

Props

size

Controls size of the field. Accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

multiline

Enables the field to accept multiple lines of text.

Qualifiers won't work with multiline

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

qualifierStart

Renders qualifier before the field

qualifierEnd

Renders qualifier after the field

extent

Controls the height of a multiline field.

Accepts "low", "mid" & "high". "low" is the default.

invalid

Adds error styles to the field if true

Does not work with multiline prop

Email

Props

size

Controls size of the field. accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

qualifierStart

Renders qualifier before the field

qualifierEnd

Renders qualifier after the field

invalid

Adds error styles to the field if true

Password

Props

size

Controls size of the field. accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

qualifierStart

Renders qualifier before the field

qualifierEnd

Renders qualifier after the field

invalid

Adds error styles to the field if true

URL

Props

size

Controls size of the field. accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

qualifierStart

Renders qualifier before the field

qualifierEnd

Renders qualifier after the field

invalid

Adds error styles to the field if true

Numeric

Props

size

Controls size of the field. accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

qualifierStart

Renders qualifier before the field

qualifierEnd

Renders qualifier after the field

invalid

Adds error styles to the field if true

Search

Props

size

Controls size of the field. accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

invalid

Adds error styles to the field if true

Datefield

Props

size

Controls size of the field. accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

invalid

Adds error styles to the field if true

Timefield

Props

size

Controls size of the field. Accepts s, m, l for small, medium & large

stretch

Field matches the width of its container

qualifier

Renders an icon before or after the field. Accepts SVG or SVG wrapped React component

invalid

Adds error styles to the field if true