Input Fields

Edit on GitHub

Input fields allow users to enter text, dates, and other structured data within a form. Each field type includes clear labeling and validation to support a consistent, accessible experience.

@volvo-cars/css v2.5.1@volvo-cars/react-forms v2.0.1

Text Input Floating Label

Full name

Show codeHide code

import { TextInput } from '@volvo-cars/react-forms';

export function TextInputFloatingLabel() {
  return (
    <TextInput name="full-name" label="Full name" variant="floating-label" />
  );
}

Input Types

Full name

Email address

Password

Phone number

Show codeHide code

import {
  EmailInput,
  PasswordInput,
  TelInput,
  TextInput,
} from '@volvo-cars/react-forms';

export function InputTypes() {
  return (
    <div className="flex-col gap-16">
      <TextInput name="full-name" label="Full name" variant="top-label" />
      <EmailInput name="email" label="Email address" variant="top-label" />
      <PasswordInput
        name="password"
        label="Password"
        showPasswordLabel="Show password"
        variant="top-label"
      />
      <TelInput name="phone" label="Phone number" variant="top-label" />
    </div>
  );
}

Date Input Example

Start date

Show codeHide code

import { DateInput } from '@volvo-cars/react-forms';

export function DateInputExample() {
  return <DateInput name="start-date" label="Start date" variant="top-label" />;
}

Currency Input Example

Price

€

Show codeHide code

import { CurrencyInput } from '@volvo-cars/react-forms';

export function CurrencyInputExample() {
  return <CurrencyInput name="price" label="Price" currency="EUR" />;
}

Unit Input Example

Distance

Show codeHide code

import { UnitInput } from '@volvo-cars/react-forms';

export function UnitInputExample() {
  return <UnitInput name="distance" label="Distance" unit="kilometer" />;
}

Text Area Basic

Message

Show codeHide code

import { TextArea } from '@volvo-cars/react-forms';

export function TextAreaBasic() {
  return (
    <TextArea name="message" label="Message" variant="top-label" rows={4} />
  );
}

Input Validation

Enter a valid email address

City

We use this to find dealers near you

Show codeHide code

import { TextInput } from '@volvo-cars/react-forms';

export function InputValidation() {
  return (
    <div className="flex-col gap-16">
      <TextInput
        name="email"
        label="Email"
        errorMessage="Enter a valid email address"
        variant="top-label"
      />
      <TextInput
        name="city"
        label="City"
        hint="We use this to find dealers near you"
        variant="top-label"
      />
    </div>
  );
}

Text Input Controlled

City

Show codeHide code

import { TextInput } from '@volvo-cars/react-forms';
import { useState } from 'react';

export function TextInputControlled() {
  const [value, setValue] = useState('');

  return (
    <TextInput
      name="city"
      label="City"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      variant="top-label"
    />
  );
}