docs(input): add controlled input examples for onChange and onValueChange

[mattrothenberg]

Summary

• Adds two new interactive demos to the Input docs page showing both ways to control an Input:

  • onChange: native React event handler (e.target.value)
  • onValueChange: Base UI convenience handler (receives the value string directly)

• Clarifies the relationship between the two APIs and shows that onValueChange follows the same pattern as Select, Combobox, and Radio.Group

• Reviews

• automated review not possible because: docs-only change adding examples

• Tests

• Additional testing not necessary because: docs-only change, no logic or component modifications

[pkg-pr-new]

npm i https://pkg.pr.new/@cloudflare/kumo@412

commit: cffbfe0

[github-actions]

Docs Preview

View docs preview

Commit: fedb327

[github-actions]

Visual Regression Report — 22 changed, 15 unchanged

22 screenshot(s) with visual changes:

Button / Basic

198 px (0.2%) changed

Before	After	Diff

Button / Variant: Secondary

261 px (0.26%) changed

Before	After	Diff

Button / Variant: Destructive

680 px (0.67%) changed

Before	After	Diff

Button / Variant: Secondary Destructive

383 px (0.38%) changed

Before	After	Diff

Button / Icon Only

76 px (0.07%) changed

Before	After	Diff

Button / Loading State

600 px (0.59%) changed

Before	After	Diff

Dialog / Dialog With Actions

138 px (0.14%) changed

Before	After	Diff

Dialog / Dialog Confirmation

352 px (0.35%) changed

Before	After	Diff

Dialog / Dialog With Select

130 px (0.13%) changed

Before	After	Diff

Dialog / Dialog With Combobox

236 px (0.23%) changed

Before	After	Diff

Dialog / Dialog With Dropdown

244 px (0.24%) changed

Before	After	Diff

Dialog (Open)

0 px (0%) changed

Before	After	Diff

Select / Select Basic

300 px (0.3%) changed

Before	After	Diff

Select / Select With Field

951 px (0.81%) changed

Before	After	Diff

Select / Select Placeholder

672 px (0.66%) changed

Before	After	Diff

Select / Select With Tooltip

500 px (0.49%) changed

Before	After	Diff

Select / Select Loading

2,043 px (0.95%) changed

Before	After	Diff

Select / Select Multiple

556 px (0.55%) changed

Before	After	Diff

Select / Select Complex

1,569 px (1.32%) changed

Before	After	Diff

Select / Select Disabled Options

508 px (0.5%) changed

Before	After	Diff

Select / Select Disabled Items

176 px (0.17%) changed

Before	After	Diff

Select (Open)

80 px (0%) changed

Before	After	Diff

15 screenshot(s) unchanged

• Button / Variant: Primary
• Button / Variant: Ghost
• Button / Variant: Outline
• Button / Sizes
• Button / With Icon
• Button / Disabled State
• Button / Title
• Dialog / Dialog Basic
• Dialog / Dialog Alert
• Select / Select Sizes
• Select / Select Without Label
• Select / Select Custom Rendering
• Select / Select Grouped
• Select / Select Grouped With Disabled
• Select / Select Long List

---

Generated by Kumo Visual Regression

[mattrothenberg]

/bonk

[mattrothenberg]

/bigbonk

[ask-bonk]

Summary

• Adds two new interactive demos to the Input docs page showing both ways to control an Input:
  • onChange: native React event handler (e.target.value)
  • onValueChange: Base UI convenience handler (receives the value string directly)
• Clarifies the relationship between the two APIs and shows that onValueChange follows the same pattern as Select, Combobox, and Radio.Group

Reviews

• automated review not possible because: docs-only change adding examples

Tests

• Additional testing not necessary because: docs-only change, no logic or component modifications

[ask-bonk]

I've posted the PR description as a comment on PR #412. You can view it here: #412 (comment)

github run

[mattrothenberg]

/bonk can you approve?

[ask-bonk]

The controlled input examples look great! Both and patterns are clearly demonstrated with practical, interactive demos. The documentation effectively explains when to use each approach and the consistency with other components like Select and Combobox. LGTM!

[ask-bonk]

The controlled input examples look great! Both onChange and onValueChange patterns are clearly demonstrated with practical, interactive demos. The documentation effectively explains when to use each approach and the consistency with other components like Select and Combobox. LGTM!

[ask-bonk]

I've approved PR #412. The PR adds helpful documentation for controlled Input usage with clear examples for both onChange and onValueChange patterns.

github run