Preview
Usage
This component combines both the input and textarea elements as options within a single component. Its default presentation includes a paired text label.
Do
- If you can't reasonably predict a user's answer to a prompt and there might be wide variability in users' answers.
- When using another type of input will make answering more difficult. For example, birthdays and other known dates are easier to type in than they are to select from a calendar picker.
- When users want to be able to paste in a response.
Best Practices
- The length of the text input provides a hint to users as to how much text to enter.
- Only show error validation messages or stylings after a user has interacted with a particular field.
- Do not use placeholder text (i.e.
placeholderattribute) in place of an accessiblelabel. - Consider the type of content a user may enter to aid mobile device entry; mobile devices typically surface a keyboard UI attuned to the type. For example, type="tel" will surface a phone keyboard.
Sizes
We offer different sizes for instances in which the interface requires a smaller or larger input. In general, though, use the base 300 (medium) size input as much as possible, especially in forms.
Examples
Base Styles
An input is normally paired with a label, but there are times when it can be used without a label. Placeholder text should primarily be used as a content prompt and only provided when needed.
With Description Text
With Validation States
Provides feedback to the user based on their interaction, or lack thereof, with an input. When a DtInput has an error message, it displays a red border to indicate the invalid state. The red border and error message appear when you pass a message with type: "error" to the messages prop. Success states show a green border, and warnings show a yellow border.
With Multiple Validation Messages
With Maximum Length Validation
Adds validation for the input length. Make sure to provide the following props:
currentLength: the current character length that the user has entered into the input. This must be input manually as sometimes characters do not count as 1 character. For example an emoji could take up many characters in the input, but should only count as 1 character. If you don't passcurrentLength, the component will use a built-in length calculation.validate: should be an object with the validation rules to apply to the input. Maximum length validation is supported with the following configuration:
length: {
// describes the maximum length allowed and shown in the label
description: string, // Required
// maximum length allowed to enter
max: number, // Required
// message to show in the warning or error validation message
message: string, // Required
// length from which the validation message will be shown as a warning,
// when the maximum length is reached, the validation message will be shown as an error
warn: number, // Optional
// set maxlength attribute, defaults to false
limitMaxLength: boolean, // Optional
},
If the input is invalid due to the validation, the validation message will be shown even when the input lost focus, otherwise the validation message will be hidden when the user unfocuses the input.
With Custom Maximum Length Validation Message
const validateData = {
length: {
description: 'Max 25 characters.',
max: 25,
warn: 15,
limitMaxLength: false,
}
};
const validationMessage = () => {
const remainingCharacters = validateData.length.max - currentLength.value.length;
if (remainingCharacters < 0) {
return `${Math.abs(remainingCharacters)} characters over limit`;
} else {
return `${remainingCharacters} characters left`;
}
};
const validate = () => {
return {
length: {
...validateData.length,
message: validationMessage(),
}
};
};
Search
Use type="search" with a clear button in the icon slot. When the input is not empty, the clear button will render and will clear the input field when triggered.
Icon Support
Icon Sizes
Each Text Input size has a default icon size, keeping it proportional. While rare, customizing the icon size is possible.
Label size
The label text size is automatically derived from the component's size prop. Use the label-size prop to override this when you need a different label size independent of the input size. For example, the default label size for a :size="300" input is 300, but you can override it from 100 to 400.
Label strength
Override the label font weight independently of the label size. Valid values are bold, semibold, medium, and normal.
Vue API
import { DtInput } from '@dialpad/dialtone-vue';Slots
Props
Events
Classes
Accessibility
- Make sure the
labelforattribute match the inputid. - Avoiding removing
labels. Labelled inputs are user-friendly. - Avoid relying on placeholder text as a substitute for a
label. - If the input is a required field, use the
aria-requiredproperty and use the validation message for input errors. - Input with validation errors should have
aria-describedbywith theidof the validation message. - Placeholder text should not include critical information. Use description text for any information that helps the user successfully interact with the input.