Input Component Test

Text Input States

Default State

Hover State

Focus State

Filled State

Placeholder State

Disabled State

Numeric Input

Numeric Input with Value

Try scrolling the mouse wheel over this field while it's focused. With input.js loaded, the value no longer changes and the page scrolls normally.

Checkbox States

Default State

Checkbox Label

Default

Hover State

Checkbox Label

Hover (interactive - hover over the checkbox)

Checked State

Checkbox Label

Checked

Disabled State

Checkbox Label

Disabled

Checkbox Sizes

Default Size

Checkbox Label

Default

Small Size

Checkbox Label

Small

XSmall Size

Checkbox Label

XSmall

Radio States

Default State

Radio Label

Default

Hover State

Radio Label

Hover (interactive - hover over the radio)

Checked State

Radio Label

Checked

Disabled State

Radio Label

Disabled

Radio Sizes

Default Size

Radio Label

Default

Small Size

Radio Label

Small

XSmall Size

Radio Label

XSmall

Radio in table cell (matrix)

Same structure as Radio States, wrapped in input-radio-wrapper (like input-wrapper above) so the control is not block-stretched across the cell. DOM: input → input-radio-circle → input-radio-label. Use input-radio-label-sr-only when the column header is visible in the table.

Item	A	B
Example row	Example row: A	Example row: B