Getting StartedInstallation and setup guides 6
FormInput and selection components 26
LayoutWorkflow and structural layout components 10
NavigationMenu surfaces and hierarchical actions 7
OverlayModal and floating layer surfaces 3
FeedbackStatus, empty, progress, and loading placeholder patterns 6
UtilityGeneral-purpose interface utilities 7
Overview API Styling Examples

Examples

These examples show the styled wrapper in its default plain-CSS presentation and in a theme-aware Tailwind shell across common use cases.

Form usage

Yearpicker fits naturally into forms where a fiscal year, report year, or model year is a single submitted field.

Yearpicker form usage

Live form

Choose a fiscal year

Select the year for which this report applies.

The chosen year is part of the form until submit or reset.

Default wrapper

Stock behavior with editable YYYY input and a year grid popup that closes automatically on selection.

Default wrapper (Plain-CSS)

The default wrapper picks up the theme contract without extra utility classes.

Bounded range

minYear and maxYear constrain the year grid cells and keyboard navigation.

Bounded range (Plain-CSS)

Years outside the bounded window are rendered as disabled cells.

Disabled state

The entire field — input, trigger, and year grid — is inert when disabled is true.

Disabled state (Plain-CSS)

Disabled styling flows through the [data-disabled] state hook on the host and year cells.