Qualifiers provide a hint about the expected content of the field. They can be SVG icons or words. You can attach the qualifier using qualifierStart & qualifierEnd. Qualifiers works great for use-cases like attaching currency ISO codes or symbols to the Textfield.

Addons

Along with qualifiers, Textfields also accept React nodes (a.k.a addon) to attach them beside qualifiers. You can use addons to compose components like for a phone number field with country code selector as an addon. You can add the React nodes on either ends of the field input simultaneously.

By default addons are rendered on the extreme ends of the field. Adjacent to the addons qualifiers are rendered and they are attached to the ends of the input field. The order of these entities from start to end is addOnStart, qualifierStart, input field in the middle, qualifierEnd & addOnEnd. You can swap the positions of Qualifiers and AddOns such that qualifiers appear on the extreme ends while addOns take the middle slots.

Multiline

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

Building blocks

You can compose complex input fields with the help of the following building blocks that are part of the Textfield family.

$3

The Textfield family comes with:

* InputWrapper
* InputQualifier
* InputAddOn
* Input

$3

Use the useInput() hook to get all the prop getter functions and then spread them in the right children components. Pass all the props in the useInput() hook as parameter.

`jsx
import {
useInput,
InputWrapper,
InputQualifier,
InputAddOn,
Input
} from "@asphalt-react/textfield"

const { getInputProps, getWrapperProps, getQualifierProps } = useInput(props)







`

Form validation & Attributes

1. All textfields support HTML form validations.
2. All textfields supports data-/* attributes & DOM attributes

Accessing through React ref

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

Accessibility

1. All Textfields are focusable.
2. By default Numeric render input element with inputmode="numeric".
3. Textfields have aria-invalid attribute for components with invalid prop set to true.
4. All Textfields accept the aria-\* attributes input role.

useInput

React hook which returns prop getter functions. Use these functions to generate prop objects for different building blocks.

Arguments

useInput accepts the following props:

1. size
2. invalid
3. disabled
4. stretch
5. qualifierStart
6. qualifierEnd
7. addOnStart
8. addOnEnd
9. swapSlots

Getter functions

$3

Use this function to create props for InputWrapper component.

`jsx
const { getWrapperProps } = useInput({ size: "m", invalid: false, disabled: false, stretch: true });


/ contents of InputWrapper /

`

$3

Use this function to create props for Input component.

`jsx
const { getInputProps } = useInput({ size: "m", invalid: false, disabled: false, stretch: true });


{...getInputProps()}
/>
/ rest of the contents /

`

$3

Use this function to create props for InputQualifier component.

`jsx
const { getQualifierProps } = useInput({ size: "m" });


{...getQualifierProps()}
/>
/ rest of the contents /

`

$3

Use this function to handle qualifiers and addOns attached to the start of the field. This function comes in handy when you create a new input field using the unit components like InputWrapper and Input as it handles the order of the elements attached. getStartSlots() accepts two arguments:

* qualifierProps: a props object to pass on to the qualifier
* addOnProps: a props object to pass on to the addOn

`jsx
const { getStartSlots } = useInput({
qualifierStart: ,
addOnStart: action,
swapSlots: false,
});


<>{getStartSlots({ qualifierProps: { ariaLabel: "qualifier" } })}


`

$3

Use this function to handle qualifiers and addOns attached to the end of the field. This function comes in handy when you create a new input field using the unit components like InputWrapper and Input as it handles the order of the elements attached. getEndSlots() accepts two arguments:

* qualifierProps: a props object to pass on to the qualifier
* addOnProps: a props object to pass on to the addOn

`jsx
const { getEndSlots } = useInput({
qualifierStart: ,
addOnStart: action,
swapSlots: true,
});



<>{getEndSlots({ qualifierProps: { ariaLabel: "qualifier" } })}

`

The above code snipped will render the button (addOn) followed by the icon (qualifier) as swapSlots is true.

[comment]: # "Textfield Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Enables the field to accept multiple lines of text.

> Qualifiers do not work with multiline.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Controls the height of a multiline field. Accepts "low", "mid" & "high".

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "low" |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Make the field resizeable in horizontal direction.

This works only when multiline is true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Make the field resizeable in vertical direction.

This works only when multiline is true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

Email

Use Email field to accept email addresses

[comment]: # "Email Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Password

Use Password field for securely accepting secrets. It renders a toggle button to show/hide the password. You can override the toggle button using addOnEnd.

[comment]: # "Password Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

> This will override the default show/hide toggle button

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

URL

Use URL field to accept or edit a URL

[comment]: # "URL Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Numeric

Use Numeric field to accept numbers. The Numeric field renders an input element with type="text" & inputmode="numeric" to allow browsers to display an appropriate virtual keyboard. It also helps to eliminate some usability issues that comes with input with type="number".

For use cases of strictly speaking numbers like age, use Textfield component with type="number".

[comment]: # "Numeric Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds padding on each sides

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Removes the background.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Displays only the bottom border as an underline.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Enables heading text.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Search

Use Search field to accept search keywords.

[comment]: # "Search Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Datefield

Use Datefield to work with dates.

[comment]: # "Datefield Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Timefield

Use Timefield to select a time.

[comment]: # "Timefield Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Pinfield

Use Pinfield for verification purposes, it can have numbers, alphabets, or characters as input but comes with the numeric keyboard.
Pinfield allows 4 characters as input by default, but you can customize it using length prop as per your use case.
Pinfield applies a placeholder value by default but you can override it using placeholder prop.

[comment]: # "Pinfield Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Icon to render as start qualifier, accepts SVG.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Icon to render as end qualifier, accepts SVG.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | null |

$3

Swap the slots for qualifiers and addOns.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | N/A |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Number of characters allowed in the field.

| type | required | default |
| ------ | -------- | ------- |
| number | false | 4 |

$3

Aligns the input content in center.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Placeholder value to show in the field.

| type | required | default |
| ------ | -------- | ------- |
| string | false | "" |

$3

Adds padding on each sides

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Removes the background.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Displays only the bottom border as an underline.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Enables heading text.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

PhoneNumber

Use Phone Number field to accept phone number.

[comment]: # "PhoneNumber Props"

Props

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Show custom node when no result is found.

| type | required | default |
| ---- | -------- | ------- |
| node | false | N/A |

$3

Hint text to show in input field.

| type | required | default |
| ------ | -------- | ------- |
| string | false | N/A |

$3

Hint text to show in search input field.

| type | required | default |
| ------ | -------- | ---------------- |
| string | false | "Search Country" |

$3

Show country flag in option and button.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Array of country objects.

`js
{
id: "+62",
name: "Indonesia",
flag: "https://www.url.co.id/indonesia-flag.svg"
initialSelected: false // true if this item should be initially selected
}
`

Out of the above id and name is required.

| type | required | default |
| ------- | -------- | ------- |
| arrayOf | false | N/A |

$3

Add default country. By add this props the selection will disabled.

| type | required | default |
| ------ | -------- | ------- |
| string | false | "" |

$3

Callback to handle the country selection and input field.
It has the following signature

* countryCode - country code selected by user interaction
* inputValue - input value from user

`js
({countryCode, inputValue}, { event }) => {}
`

| type | required | default |
| ---- | -------- | ------- |
| func | false | N/A |

$3

Adds padding on each sides

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Removes the background.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Displays only the bottom border as an underline.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Enables heading text.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Enables separator.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

InputWrapper

Use InputWrapper to wrap various building blocks.

[comment]: # "InputWrapper Props"

Props

$3

React node

| type | required | default |
| ---- | -------- | ------- |
| node | false | null |

$3

Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large.

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Input matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Removes the spacing between its children.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds padding in the container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Makes field non interactive.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Set this props to true if stretch is true and there is a qualifier/addOn at the end.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Removes the background.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Displays only the bottom border as an underline.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

Input

Input renders a native input field.

[comment]: # "Input Props"

Props

$3

Type of input control.

| type | required | default |
| ------ | -------- | ------- |
| string | false | "text" |

$3

Controls size of the input. Accepts xs, s, m, l for extra small, small, medium & large.

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Input matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes field non interactive.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Add border on each sides

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Adds padding on each sides

| type | required | default |
| ---- | -------- | ------- |
| bool | false | true |

$3

Removes the background.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Displays only the bottom border as an underline.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Enables heading text.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

InputQualifier

InputQualifier provides a hint about the expected content of the field. They can be SVG icons or words.

[comment]: # "InputQualifier Props"

Props

$3

React node for the main content.

| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |

$3

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

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

InputAddOn

InputAddOn can be used to add extra React nodes along with Input.

[comment]: # "InputAddOn Props"

Props

$3

React node for the main content.

| type | required | default |
| ---- | -------- | ------- |
| node | true | N/A |

Hero

Use Hero for transactional inputs such as payments, transfers, and similar financial interactions.

[comment]: # "Hero Props"

Props

$3

Size of the Hero input.

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "m" |

$3

Adds error styles to the field if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Field matches the width of its container.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Makes the field disabled if true.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |

$3

Aligns the text inside the input.

| type | required | default |
| ---- | -------- | ------- |
| enum | false | "left" |

$3

Text for the label.

| type | required | default |
| ------ | -------- | ------- |
| string | false | "" |

$3

Icon or text to render as start qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | N/A |

$3

Icon or text to render as end qualifier. Accepts SVG for icons.

| type | required | default |
| ----- | -------- | ------- |
| union | false | N/A |

$3

React node to render before the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | N/A |

$3

React node to render after the field content.

| type | required | default |
| ------- | -------- | ------- |
| element | false | N/A |

$3

Placeholder text for the input.

| type | required | default |
| ------ | -------- | ------- |
| string | false | "" |

$3

Adds a prefix to the input.

When using a prefix, combine it with the mask prop to control which characters are allowed.

| type | required | default |
| ------ | -------- | ------- |
| string | false | "" |

$3

Applies an input mask to restrict allowed characters.
The default value is an alphanumeric mask of length 12 based on the common case for phone.

Mask tokens:

* 9 → numeric (0–9)
* a → alphabetic (A–Z, a–z)
→ any character (allows all characters)

The mask length is determined by repeating tokens.
For example, "99999999" allows eight digits, while "**"` allows four any characters.

| type | required | default |
| ------ | -------- | ---------------- |
| string | false | "**" |

$3

Enables pin placeholder.

| type | required | default |
| ---- | -------- | ------- |
| bool | false | false |