Reusable Form Components Library

Problem/Feature Description

A healthcare startup is building a patient intake form for their Vue 3 web app. The design system team needs to create a small set of reusable input components — a text input, a numeric input, and a dropdown select — that can be dropped into any form with minimal boilerplate. These components need to feel native to Vue's template syntax so that developers across the team can use them naturally without reading documentation every time.

The intake form itself collects a patient's first name, last name, age, and preferred appointment type (from a fixed set of options). The form is used in a clinical setting and has strict accessibility requirements: all fields must be labeled so screen reader users can navigate the form correctly, and any validation errors displayed next to a field must be announced automatically to assistive technology users.

Output Specification

Produce the following files:

• src/components/TextInput.vue — a reusable text input component that supports two-way data binding, accepts a label prop (string) and an optional error prop (string) for displaying validation messages, and an optional placeholder prop.
• src/components/NumberInput.vue — a reusable numeric input component with the same two-way binding support, label, error, and optional min/max props.
• src/components/SelectInput.vue — a reusable select/dropdown component that supports two-way binding, a label prop, an options prop (array of { value: string, label: string }), and an optional error prop.
• src/components/PatientIntakeForm.vue — the form that composes the three input components to collect firstName, lastName, age, and appointmentType. Each field should be bound with the standard Vue binding syntax. Include a submit button.

Use TypeScript throughout. Place all files in src/components/.