TextInput.mdx

import { Canvas, ArgTypes, PRIMARY_STORY } from '@storybook/addon-docs'; import { Primary } from './TextInput.stories';

Text Input

A text input component for entering a line of text in a form.

How to Use

You can pass in the v-model prop to bind the text input to the parent component's data model.

Icons are available for the left, right, or both sides of the input via iconLeft and iconRight named slots.

A clear (X) button appears on the right side of the input when withClearButton is set to true. Clicking the button will clear the text in the input.

The withCopyButton prop will make the field read-only and render a 'Copy' button. Clicking the button will copy the text in the input.

To select all text on clicking the text box, pass in the selectOnClick prop.

The selectedOptions named slot is specifically for the Multiselect component.

You can pass in a @change handler to trigger a custom function on change events. The event object will be emitted along with the change event.

You can pass in a @copy handler to trigger a custom function on copy button click.

You can pass in a @invalid handler to trigger a custom function when the input is invalid. The event object's target will be emitted along with the invalid event.

<text-input>
  <template v-slot:iconLeft>
    <MagnifyingGlass class="w-6 h-6" />
  </template>
</text-input>

Props