@asphalt-react/textfield

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 or text 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 as icon or text to render it with the field. By default or qualifierStart renders it before the field, use qualifierEnd to render it after. qualifierEnd takes over if both are applied. Text qualifiers are helpful in case of currency hints like 'USD'. Use 3 or few characters for better user experience.

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

multiline

Enables the field to accept multiple lines of text.

Qualifiers won't work with multiline

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or string.

type	required	default
union	false	null

qualifierStart

Renders qualifier before the field

type	required	default
bool	false	true

qualifierEnd

Renders qualifier after the field

type	required	default
bool	false	false

extent

Controls the height of a multiline field.

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

type	required	default
enum	false	"low"

invalid

Adds error styles to the field if true.

type	required	default
bool	false	false

Email

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or string.

type	required	default
union	false	null

qualifierStart

Renders qualifier before the field

type	required	default
bool	false	true

qualifierEnd

Renders qualifier after the field

type	required	default
bool	false	false

invalid

Adds error styles to the field if true

type	required	default
bool	false	false

Password

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or string.

type	required	default
union	false	null

qualifierStart

Renders qualifier before the field

type	required	default
bool	false	true

qualifierEnd

Renders qualifier after the field

type	required	default
bool	false	false

invalid

Adds error styles to the field if true

type	required	default
bool	false	false

URL

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or text.

type	required	default
union	false	null

qualifierStart

Renders qualifier before the field

type	required	default
bool	false	true

qualifierEnd

Renders qualifier after the field

type	required	default
bool	false	false

invalid

Adds error styles to the field if true

type	required	default
bool	false	false

Numeric

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or string.

type	required	default
union	false	null

qualifierStart

Renders qualifier before the field

type	required	default
bool	false	true

qualifierEnd

Renders qualifier after the field

type	required	default
bool	false	false

invalid

Adds error styles to the field if true

type	required	default
bool	false	false

Search

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

invalid

Adds error styles to the field if true

type	required	default
bool	false	false

Datefield

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or string.

type	required	default
union	false	null

invalid

Adds error styles to the field if true

type	required	default
bool	false	false

Timefield

Props

size

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

type	required	default
enum	false	"m"

stretch

Field matches the width of its container

type	required	default
bool	false	false

qualifier

Renders an icon or text before or after the field. Accepts SVG or string.

type	required	default
union	false	null

invalid

Adds error styles to the field if true

type	required	default
bool	false	false