Text Field | Qasa Design System

Full name

Examples

Helper text and placeholder

The placeholder prop can be used to show the user how to format the data we are asking for. It is not needed when the format is made obvious by the label, for e.g "Email".

The helperText prop can be used to provide additional information about the input field below it.

Username

Must be between 4-20 characters, can include letters and numbers.

Invalid state

If the isInvalid prop is set to true, the errorMessage contents will be displayed below the input field, replacing helperText.

Field label

Error message

With suffix

Providing the suffix prop will append a text to the right of the input field. Suffix is useful for displaying units.

Enhance user experience

Consider providing additional properties to enhance the user experience, such as inputMode. For example, using inputMode="decimal" shows a numeric keyboard on mobile devices which makes it easier for users to enter numbers.

Weight

Accessibility

Provide a clear label for the text field that describes its purpose.
Use the appropriate type prop to ensure the correct keyboard is displayed on mobile devices.
Use the helperText and errorMessage props to provide additional context to the user.

API Reference

Prop	Default	Description
`label`	-	`string` The label for the input
`type?`	-	`HTMLInputTypeAttribute`
`suffix?`	-	`string` Suffixed text to display after the input. This is useful for e.g. displaying units of measurement.
`value?`	-	`string \| number \| readonly string[]`
`helperText?`	-	`string` Text that provides additional guidance to the user
`isInvalid?`	-	`boolean` If `true`, the input will be invalid
`isDisabled?`	-	`boolean` If `true`, the input will be disabled
`isOptional?`	-	`boolean` If `true`, the input will display an optional indicator. If the `isRequired` prop is also `true`, this prop will be ignored.
`isRequired?`	-	`boolean` If `true` the input will be required
`errorMessage?`	-	`string` The error message to display if `isInvalid` is `true`
`inputMode?`	-	`"search" \| "text" \| "email" \| "tel" \| "url" \| "none" \| "numeric" \| "decimal"` Hints at the type of data that might be entered by the user while editing the element or its contents
`step?`	-	`string \| number`