SurfaceBootstrap.Form.NumberInput (surface_bootstrap v0.1.1)

The number input element as defined here:

Properties

  • field :atom, required: true - The the field on the changeset.
  • value :any - Pre populated value.
  • label :string - The string label of the field.
  • class :css_class, default: [] - Class to apply to input.
  • opts :keyword, default: [] - Any opts you want to pass on to internal input from Phoenix.HTML.Form.
  • disabled :boolean - Disable input.
  • help_text :string - Help text, will be replaced by error text if changeset gets errors. Should not be used on inputs inside InputGroup .
  • blur :event, default: nil - Triggered when the component loses focus.
  • focus :event - Triggered when the component receives focus.
  • capture_click :event - Triggered when the component receives click.
  • keydown :event - Triggered when a button on the keyboard is pressed.
  • keyup :event - Triggered when a button on the keyboard is released.
  • spacing :string, default: "3", values: ~w(1 2 3 4 5) - Margin below form control, to create spacing. Defaults to 3. Is ignored if input is inside an InputGroup..
  • size :string, values: ~w(small large) - Size of the input, defaults to nil(normal).
  • in_group :boolean, default: false - Is input in group? Set to true if used in InputGroup, defaults to false.
  • placeholder :string, default: nil - Placeholder value.
  • floating_label :boolean - Floating label? https://getbootstrap.com/docs/5.0/forms/floating-labels/ .
  • readonly :boolean - Read only.
  • readonly_plaintext :boolean - Read only plaintext, will be ignored if readonly is not true.
  • max :integer - Largest number allowed, as enforced by client browser. Not validated by Elixir..
  • min :integer - Smallest number allowed, as enforced by client browser. Not validated by Elixir..
  • step :integer - A stepping interval to use when using up and down arrows to adjust the value, as well as for validation.

Link to this section Summary

Link to this section Functions

Callback implementation for Phoenix.LiveComponent.mount/1.

Link to this function

render(assigns)

Callback implementation for Phoenix.LiveComponent.render/1.

Link to this function

update(assigns, socket)

Callback implementation for Phoenix.LiveComponent.update/2.