PhiaUi.Components.YearPicker (phia_ui v0.1.17)

Copy Markdown View Source

Year selection input — styled <input type="number"> scoped to year ranges.

Wraps an HTML number input with PhiaUI's input styling (borders, focus ring, size variants, error state). Supports standalone use or Phoenix form field integration with changeset error display.

Present in many UI kits: Ant Design DatePicker (year mode), MUI DatePicker (year view), Mantine YearPickerInput.

Zero JavaScript — uses the native browser number input with min/max bounds.

Examples

<%!-- Standalone --%>
<.year_picker id="year" name="year" label="Year" value={2026} />

<%!-- Custom range --%>
<.year_picker id="year" name="year" min_year={2000} max_year={2030} />

<%!-- Form field integration --%>
<.year_picker
  id="event_year"
  name={@form[:year].name}
  value={@form[:year].value}
  errors={Enum.map(@form[:year].errors, &translate_error/1)}
  label="Event Year"
/>

Summary

Functions

year_picker(assigns)

Functions

year_picker(assigns)

Attributes

  • id (:string) - HTML id for the input and label for link. Defaults to nil.
  • name (:string) - HTML name for form submission. Defaults to nil.
  • value (:integer) - Current year value as an integer, e.g. 2026. Defaults to nil.
  • label (:string) - Label text rendered above the input. Defaults to nil.
  • description (:string) - Helper text rendered below the label. Defaults to nil.
  • errors (:list) - List of error message strings. Defaults to [].
  • min_year (:integer) - Minimum selectable year (maps to the min attribute). Defaults to 1900.
  • max_year (:integer) - Maximum selectable year (maps to the max attribute). Defaults to 2100.
  • disabled (:boolean) - Disables the input. Defaults to false.
  • size (:atom) - Input height/padding: :sm (h-8), :default (h-10), :lg (h-12). Defaults to :default. Must be one of :sm, :default, or :lg.
  • class (:string) - Additional CSS classes merged onto the input. Defaults to nil.
  • Global attributes are accepted. HTML attributes forwarded to the <input> element. Supports all globals plus: ["required", "placeholder", "phx-debounce", "step"].