@volvo-cars/react-forms

@volvo-cars/react-forms

A React form component library built on @volvo-cars/css. Provides Design System-compliant form controls that support both controlled and uncontrolled usage patterns.

What's included

Text inputs

• TextInput — Single-line text field
• TextArea — Multi-line text field
• EmailInput — Email address field (type="email")
• PasswordInput — Password field with show/hide toggle
• TelInput — Telephone number field (type="tel")
• UrlInput — URL field (type="url")

Numeric & specialised inputs

• CurrencyInput — Formatted currency input
• UnitInput — Numeric input with a unit label (e.g. km, kg)
• DateInput — Date picker input
• DateTimeInput — Date and time picker input

Range & slider inputs

• RangeSlider — Single-handle range slider
• DoubleRangeSlider — Dual-handle range slider for selecting a value range

Selection controls

• Checkbox — Checkbox with label and optional hint (controlled & uncontrolled)
• CheckboxCard — Card-style checkbox for richer selection UIs
• Radio — Radio button with label and optional hint
• RadioCard — Card-style radio button
• RadioGroup — Fieldset wrapper that manages a group of Radio inputs
• RadioContextProvider — Context provider for sharing radio group state
• Select — Native <select> dropdown

Buttons & feedback

• SubmitButton — Form submit button with loading state support
• ErrorMessage — Accessible inline error message for form fields
• Hint — Supplementary hint text for form fields

Installation

yarn add @volvo-cars/react-forms