Input | Dialtone Design System

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.

Don’t

When users are choosing from a specific set of options. Consider Select, Radio, or Checkbox.

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. placeholder attribute) in place of an accessible label.
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 pass currentLength, 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.

Accessibility

Make sure the label for attribute match the input id.
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-required property and use the validation message for input errors.
Input with validation errors should have aria-describedby with the id of 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.

Vue API

import { DtInput } from '@dialpad/dialtone-vue';

Slots

Name	Type
`description`	Slot for description, defaults to description prop
`endIcon`	Slot for end icon
`label`	Slot for label, defaults to label prop
`startIcon`	Slot for start icon
`leftIcon` Deprecated	Use startIcon
`rightIcon` Deprecated	Use endIcon

Props

Name	Default	Type
`currentLength`	`null`	`number` The current character length that the user has entered into the input. This will only need to be used if you are using `validate.length` and the string contains abnormal characters. For example, an emoji could take up many characters in the input, but should only count as 1 character. If no number is provided, a built-in length calculation will be used for the length validation.
`description`	`''`	`string` Description for the input
`descriptionClass`	`''`	`string\|array\|object` Used to customize the description container
`disabled`	`false`	`"true"` \| `"false"` Disables the input
`endIconClass`	`''`	`string\|array\|object` Used to customize the end icon container
`hidden`	`false`	`boolean` hidden allows to use input without the element visually present in DOM
`inputClass`	`''`	`string\|object\|array` Additional class name for the input element. Can accept String, Object, and Array, i.e. has the same API as Vue's built-in handling of the class attribute.
`inputWrapperClass`	`''`	`string\|object\|array` Additional class name for the input wrapper element. Can accept all of: String, Object, and Array, i.e. has the same api as Vue's built-in handling of the class attribute.
`label`	`''`	`string` Label for the input. Can also be overridden with a slot of the same name.
`labelClass`	`''`	`string\|array\|object` Used to customize the label container
`labelSize`	`null`	`"100"` \| `"200"` \| `"300"` \| `"400"` Overrides the label text size. When not provided, the label size is derived from the component size prop.
`labelStrength`	`null`	`"bold"` \| `"semibold"` \| `"medium"` \| `"normal"` Overrides the label font weight.
`messages`	`[]`	`array` Validation messages
`messagesChildProps`	`{}`	`object` A set of props that are passed into the validation messages component
`messagesClass`	`''`	`string\|array\|object` Used to customize the validation messages component
`modelValue`	`''`	`string\|number` Value of the input
`name`	`''`	`string` Name property of the input element
`retainWarning`	`false`	`boolean` Whether the input will continue to display a warning validation message even if the input has lost focus.
`showLabel`	`true`	`"true"` \| `"false"` Determines visibility of input label.
`showMessages`	`true`	`"true"` \| `"false"` Used to hide / show the validation messages
`size`	`300`	`"100"` \| `"200"` \| `"300"` \| `"400"` \| `"500"` Size of the input.
`startIconClass`	`''`	`string\|array\|object` Used to customize the start icon container
`type`	`text`	`"text"` \| `"password"` \| `"email"` \| `"number"` \| `"textarea"` \| `"date"` \| `"time"` \| `"file"` \| `"tel"` \| `"search"` \| `"color"` Type of the input. When `textarea` a `<textarea>` element will be rendered instead of an `<input>` element.
`validate`	`null`	`object` Validation for the input. Supports maximum length validation with the structure: `{ "length": {"description": string, "max": number, "warn": number, "message": string, "limitMaxLength": boolean }}`

Events

Name	Type
`blur`	`FocusEvent` Native input blur event
`clear`	Input clear event
`focus`	`FocusEvent` Native input focus event
`focusin`	`FocusEvent` Native input focusin event
`focusout`	`FocusEvent` Native input focusout event
`update:invalid`	`Boolean` Result of the input validation
`update:length`	`Number` Length of the input when currentLength prop is not passed
`update:modelValue`	`String \| Number` Event fired to sync the modelValue prop with the parent component

Classes

Class	Applies to	Description

Input documentation last updated Friday, September 4, 2026

fix/popover-modal-zindex-scope

Usage #

Do

Don’t

Best Practices #

Sizes #

Examples #

Base Styles #

With Description Text #

With Validation States #

With Multiple Validation Messages #

With Maximum Length Validation #

With Custom Maximum Length Validation Message #

Search #

Icon Support #

Icon Sizes #

Label size #

Label strength #

Accessibility #

Vue API #