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.
- 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 |
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 |