Form Elements

All standard HTML form elements in one place. Every element has a stable data-testid attribute.

Text Inputs

Standard text input variants. Try selecting with page.getByLabel('Username')

Textarea

Multi-line text input. Try page.getByRole('textbox', { name: 'Message' })

0 characters

Dropdowns / Selects

Single and multi-select dropdowns. Try page.getByRole('combobox')

Checkboxes & Radio Buttons

Try page.getByRole('checkbox', { name: 'Playwright' })

Which tools do you use? (checkboxes)

Preferred language (radio buttons)

Date Picker

Native HTML date/time inputs. Try page.fill('[data-testid="playground-date"]', '2025-01-15')

File Upload

Standard file input and drag-and-drop zone. Try page.setInputFiles('[data-testid="playground-file-input"]', 'file.pdf')

Drag & drop files here, or click to browse

Sliders / Range Inputs

Range sliders with value display. Try page.fill('[data-testid="playground-range"]', '75')

0100

Toggle Switches

Custom toggle switches built with checkboxes. Try page.getByRole('switch', { name: 'Notifications' })

State: Notifications=false, Dark Mode=true, Auto-save=false

Color Picker

Native HTML color input. Try page.fill('[data-testid="playground-color"]', '#ff0000')

#3b82f6