SurfaceBulma.Form.TextInput (surface_bulma v0.5.1)

The text field component as defined here: https://bulma.io/documentation/form/input/

properties

Properties

  • label :string - The string label of the field

  • size :string, values: ~w(small normal medium large) - The color of the input.

  • expanded :boolean - Should input fill entire width of form?

  • is_horizontal :boolean, default: false - Whether or not the field is horizontal

  • help_text :string - Help text, will be replaced by error text if changeset gets errors

  • field_class :css_class, default: [] - Class to apply to the Field

  • static :boolean - Static input

  • disabled :boolean - Disable input

  • readonly :boolean - Read only

  • disable_icons :boolean, default: false - Disable default fontawesome icons tied to validation

  • icon_left :any, default: nil - Icon to place on the left side of input box. Must be a valid icon. Bulma does not currently support stacked / layered icons inside a form control.

  • icon_right :any, default: nil - Icon to place on the right side of input box. Must be a valid icon. Setting this prop will overwrite (and not display) any of the generated icons for validations, similar to setting disable_icons="true". Bulma does not currently support stacked / layered icons inside a form control.

  • placeholder :string, default: nil - Placeholder value

  • id :string - The id of the corresponding input field

  • opts :keyword, default: [] - Options list

  • class :css_class - Class or classes to apply to the input

  • value :string - Value to pre-populated the input

  • name :string - The name of the corresponding input field

  • field :any, from_context: {Surface.Components.Form.Field, :field} - An identifier for the input

  • form :form, from_context: {Surface.Components.Form, :form} - An identifier for the form

  • values :keyword, default: [] - List values that will be sent as part of the payload triggered by an event

  • maxlength :integer - Max length of field, as enforced by client browser. Not validated by Elixir.

  • minlength :integer - Minimum length of field, as enforced by client browser. Not validated by Elixir.

slots

Slots

  • left_addon - Slot adds content to left side of input. Only inputs, buttons and dropdowns are supported. NOTE: If you supply addons, the label is disabled. You cannot combine labels and addons. If you require field labels with addons you must use horizontal forms. See SurfaceBulma.Form.HorizontalControlGroup.

  • right_addon - Slot adds content to right side of input. Only inputs, buttons and dropdowns are supported. NOTE: If you supply addons, the label is disabled. You cannot combine labels and addons. If you require field labels with addons you must use horizontal forms. See SurfaceBulma.Form.HorizontalControlGroup.

events

Events

  • keydown - Triggered when a key on the keyboard is pressed
  • keyup - Triggered when a key on the keyboard is released
  • window_keydown - Triggered when a key on the keyboard is pressed (window-level)
  • window_keyup - Triggered when a key on the keyboard is released (window-level)
  • blur - Triggered when the component loses focus
  • focus - Triggered when the component receives focus
  • window_blur - Triggered when the page loses focus
  • window_focus - Triggered when the page receives focus
  • click - Triggered when the component receives click
  • capture_click - Triggered when the component captures click

Link to this section Summary

Link to this section Functions

Link to this function

render(assigns)

Callback implementation for Surface.Component.render/1.