Class: BetterUi::Forms::NumberInputComponent

Inherits:
BaseComponent show all
Defined in:
app/components/better_ui/forms/number_input_component.rb

Overview

A number input component with support for min/max/step constraints, spinner controls, and prefix/suffix icons.

This component extends BaseComponent to provide a number input field with optional decorative or functional icons, numeric constraints (min, max, step), and the ability to hide the browser’s default up/down arrow spinner buttons.

Examples:

Basic number input

<%= render BetterUi::Forms::NumberInputComponent.new(
  name: "user[age]",
  label: "Age",
  min: 0,
  max: 120
) %>

Number input with step (decimal values)

<%= render BetterUi::Forms::NumberInputComponent.new(
  name: "product[price]",
  label: "Price",
  min: 0,
  step: 0.01,
  placeholder: "0.00"
) %>

Number input without spinner controls

<%= render BetterUi::Forms::NumberInputComponent.new(
  name: "quantity",
  label: "Quantity",
  min: 1,
  show_spinner: false
) %>

Number input with prefix icon (currency)

<%= render BetterUi::Forms::NumberInputComponent.new(
  name: "amount",
  label: "Amount",
  min: 0,
  step: 0.01
) do |component| %>
  <% component.with_prefix_icon do %>
    $
  <% end %>
<% end %>

Number input with suffix icon (unit)

<%= render BetterUi::Forms::NumberInputComponent.new(
  name: "weight",
  label: "Weight",
  min: 0
) do |component| %>
  <% component.with_suffix_icon do %>
    kg
  <% end %>
<% end %>

With validation errors

<%= render BetterUi::Forms::NumberInputComponent.new(
  name: "user[age]",
  value: "150",
  label: "Age",
  errors: ["Age must be between 0 and 120"]
) %>

Using with Rails form builder

<%= form_with model: @product, builder: BetterUi::UiFormBuilder do |f| %>
  <%= f.ui_number_input :price, min: 0, step: 0.01 do |component| %>
    <% component.with_prefix_icon do %>
      $
    <% end %>
  <% end %>
<% end %>

See Also:

Constant Summary

Constants inherited from BaseComponent

BaseComponent::SIZES

Constants inherited from ApplicationComponent

ApplicationComponent::SHADOWS, ApplicationComponent::VARIANTS, ApplicationComponent::VARIANT_BODY_DIVIDE, ApplicationComponent::VARIANT_DIVIDE, ApplicationComponent::VARIANT_HEADER_BG, ApplicationComponent::VARIANT_HEADER_TEXT, ApplicationComponent::VARIANT_HIGHLIGHTED, ApplicationComponent::VARIANT_HOVERABLE, ApplicationComponent::VARIANT_RING, ApplicationComponent::VARIANT_SORT_ICON, ApplicationComponent::VARIANT_STRIPED

Instance Method Summary collapse

Methods inherited from BaseComponent

#call

Constructor Details

#initialize(name:, value: nil, label: nil, hint: nil, placeholder: nil, size: :md, disabled: false, readonly: false, required: false, errors: nil, min: nil, max: nil, step: nil, show_spinner: true, container_classes: nil, label_classes: nil, input_classes: nil, hint_classes: nil, error_classes: nil, **options) ⇒ NumberInputComponent

Initializes a new number input component.

Accepts all parameters from BaseComponent#initialize plus additional number-specific parameters for constraints and spinner control.

Examples:

Basic initialization with constraints

BetterUi::Forms::NumberInputComponent.new(
  name: "product[quantity]",
  label: "Quantity",
  min: 1,
  max: 100,
  step: 1
)

Currency input with decimal precision

BetterUi::Forms::NumberInputComponent.new(
  name: "product[price]",
  label: "Price",
  min: 0,
  step: 0.01,
  show_spinner: false
)

Parameters:

  • name (String) —

    the name attribute for the input field (required for form submission)

  • value (String, Numeric, nil) (defaults to: nil) —

    the current value of the input field

  • label (String, nil) (defaults to: nil) —

    the label text to display above the input

  • hint (String, nil) (defaults to: nil) —

    helpful hint text displayed below the input

  • placeholder (String, nil) (defaults to: nil) —

    placeholder text shown when input is empty

  • size (Symbol) (defaults to: :md) —

    the size variant (:xs, :sm, :md, :lg, :xl), defaults to :md

  • disabled (Boolean) (defaults to: false) —

    whether the input should be disabled (non-interactive), defaults to false

  • readonly (Boolean) (defaults to: false) —

    whether the input should be readonly (viewable but not editable), defaults to false

  • required (Boolean) (defaults to: false) —

    whether the field is required (shows asterisk indicator), defaults to false

  • errors (Array<String>, String, nil) (defaults to: nil) —

    validation error messages to display below the input

  • min (Numeric, nil) (defaults to: nil) —

    the minimum allowed value (HTML5 min attribute)

  • max (Numeric, nil) (defaults to: nil) —

    the maximum allowed value (HTML5 max attribute)

  • step (Numeric, nil) (defaults to: nil) —

    the step increment for value changes (e.g., 0.01 for currency, 1 for integers)

  • show_spinner (Boolean) (defaults to: true) —

    whether to display browser’s up/down arrow buttons, defaults to true

  • container_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the outer wrapper

  • label_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the label element

  • input_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the input element

  • hint_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for the hint text

  • error_classes (String, Array<String>, nil) (defaults to: nil) —

    additional CSS classes for error messages

  • options (Hash) —

    additional HTML attributes to pass through to the input element

Raises:

  • (ArgumentError) —

    if size is not one of the valid SIZES

See Also:



140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
 
# File 'app/components/better_ui/forms/number_input_component.rb', line 140

def initialize(
  name:,
  value: nil,
  label: nil,
  hint: nil,
  placeholder: nil,
  size: :md,
  disabled: false,
  readonly: false,
  required: false,
  errors: nil,
  min: nil,
  max: nil,
  step: nil,
  show_spinner: true,
  container_classes: nil,
  label_classes: nil,
  input_classes: nil,
  hint_classes: nil,
  error_classes: nil,
  **options
)
  @min = min
  @max = max
  @step = step
  @show_spinner = 

  super(
    name: name,
    value: value,
    label: label,
    hint: hint,
    placeholder: placeholder,
    size: size,
    disabled: disabled,
    readonly: readonly,
    required: required,
    errors: errors,
    container_classes: container_classes,
    label_classes: label_classes,
    input_classes: input_classes,
    hint_classes: hint_classes,
    error_classes: error_classes,
    **options
  )
end

Instance Method Details

#with_prefix_icon ⇒ Object

Slot for rendering an icon or content before (left of) the input text. The icon is positioned absolutely and input padding is adjusted automatically.

Yield Returns:

  • (String) —

    the HTML content for the prefix icon



85
 
# File 'app/components/better_ui/forms/number_input_component.rb', line 85

renders_one :prefix_icon

#with_suffix_icon ⇒ Object

Slot for rendering an icon or content after (right of) the input text. The icon is positioned absolutely and input padding is adjusted automatically.

Yield Returns:

  • (String) —

    the HTML content for the suffix icon



91
 
# File 'app/components/better_ui/forms/number_input_component.rb', line 91

renders_one :suffix_icon