Inputs

Text entry components for forms — covering text, email, password, amount, phone, pin, and number inputs.

Open in Storybook

TextInput — Interactive Demo

Email Address

Variant: textpasswordemail Size: largesmall Error: Disabled

Input Variants

The design system provides specialized input components:

Component	Purpose
TextInput	General text, email, password entry
AmountInput	Currency amount entry with formatting
PhoneInput	Phone number with country code
PinInput	Multi-digit code entry
NumberInput	Numeric-only input with increment/decrement

TextInput Usage

<script setup>
import { ref } from 'vue';
import { TextInput } from '@yellowcard/b2b-design-system';

const email = ref('');
</script>

<template>
  <TextInput
    v-model="email"
    variant="email"
    label="Email"
    placeholder="you@example.com"
    :required="true"
  />
</template>

States

Input states

Default

With Value

With Error

This field is required

Disabled

Readonly

API Reference — TextInput

Props

Prop	Type	Default	Description
modelValue	string	''	Input value (v-model)
variant	'text' | 'password' | 'email'	'text'	Input type
size	'large' | 'small'	'large'	Input size
label	string	''	Label text above the input
placeholder	string	'Your text here'	Placeholder text
helperText	string	''	Help text below the input
errorMessage	string	''	Error message (shows error state when set)
disabled	boolean	false	Disabled state
readonly	boolean	false	Read-only state
required	boolean	false	Shows required indicator
skeleton	boolean	false	Skeleton loading state
showTrailingIcon	boolean	false	Show icon on the right
showLeadingIcon	boolean	false	Show icon on the left

Events

Event	Payload	Description
update:modelValue	string	Emitted when value changes
focus	FocusEvent	Emitted on input focus
blur	FocusEvent	Emitted on input blur
input	string	Emitted on every keystroke
keydown	KeyboardEvent	Emitted on keydown
trailing-icon-click	—	Emitted when trailing icon is clicked
leading-icon-click	—	Emitted when leading icon is clicked