OctantisWeb.Components.Polaris.TextField (octantis v0.1.3)

View Source

A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers.

Must be wrapped in a form component.

Examples

  <.form ... >
    <.text_field label="Search"/>
  </.form>

See

Summary

Functions

As A helper for setting the underlaying element of a component

Join items, specificaly text fields.

A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers.

Functions

as(assigns)

As A helper for setting the underlaying element of a component

Attributes

  • element (:string) (required) - Must be one of "input", or "textarea".
  • value (:string)
  • Global attributes are accepted. Supports all globals plus: ["pattern", "spell_check", "name", "max", "disabled", "min", "step", "max_length", "read_only", "size", "auto_focus", "rows", "min_length", "auto_complete", "input_mode"].

build_described_by(arg, id)

build_labelled_by(arg, id)

class(attrs)

connected(assigns)

Join items, specificaly text fields.

Slots

  • left
  • inner_block (required)
  • right

connected_item_class(attrs)

handle_textfield_click(js \\ %JS{}, id)

input_class(attrs)

text_field(assigns)

A text field is an input field that merchants can type into. It has a range of options and supports several text formats including numbers.

Must be wrapped in a form component.

Examples

  <.form ... >
    <.text_field label="Search"/>
  </.form>

See

Attributes

  • prefix (:string) - Text to display before value. Defaults to nil.
  • suffix (:string) - Text to display after value. Defaults to nil.
  • placeholder (:string) - Hint text to display. Defaults to nil.
  • field (Phoenix.HTML.FormField) (required) - The Phoenix Form Field.
  • help_text (:string) - Additional hint text to display. Defaults to nil.
  • label (:string) - Label for the input.
  • label_action (:any) - Adds an action to the label. Defaults to nil.
  • label_hidden (:boolean) - Visually hide the label. Defaults to false.
  • disabled (:boolean) - Disable the input. Defaults to false.
  • clear_button (:boolean) - Show a clear text button in the input. Defaults to false.
  • suggestion (:string) - An inline autocomplete suggestion containing the input value. The characters that complete the input value are selected for ease of deletion on input change or keypress of Backspace/Delete. The selected substring is visually highlighted with subdued styling. Defaults to nil.
  • read_only (:boolean) - Disable editing of the input. Defaults to false.
  • auto_focus (:boolean) - Automatically focus the input. Defaults to false.
  • focused (:boolean) - Force the focus state on the input. Defaults to false.
  • multiline (:integer) - Allow for multiple lines of input. Defaults to nil.
  • error (:string) - Error to display beneath the label.
  • type (:string) - Determine type of input. Defaults to "text".
  • name (:string) - Name of the input. Defaults to nil.
  • id (:string) - ID for the input.
  • role (:string) - Defines a specific role attribute for the input. Defaults to nil.
  • step (:integer) - Limit increment value for numeric and date-time inputs. Defaults to nil.
  • auto_complete (:string) - Enable automatic completion by the browser. Set to off when you do not want the browser to fill in info. Defaults to nil.
  • max (:string) - Mimics the behavior of the native HTML attribute, limiting the maximum value. Defaults to nil.
  • max_length (:integer) - Maximum character length for an input. Defaults to nil.
  • max_height (:integer) - Maximum height of the input element. Only applies when multiline is true. Defaults to nil.
  • min (:string) - Mimics the behavior of the native HTML attribute, limiting the minimum value. Defaults to nil.
  • min_length (:integer) - Minimum character length for an input. Defaults to nil.
  • pattern (:string) - A regular expression to check the value against. Defaults to nil.
  • input_mode (:string) - Choose the keyboard that should be used on mobile devices. Defaults to nil.
  • spell_check (:boolean) - Indicate whether value should have spelling checked. Defaults to nil.
  • aria_owns (:string) - Indicates the id of a component owned by the input. Defaults to nil.
  • aria_expanded (:boolean) - Indicates whether or not a Popover is displayed. Defaults to nil.
  • aria_controls (:string) - Indicates the id of a component controlled by the input. Defaults to nil.
  • aria_active_descendant (:string) - Indicates the id of a related components visually focused element to the input. Defaults to nil.
  • aria_autocomplete (:string) - Indicates what kind of user input completion suggestions are provided. Defaults to "off".
  • align (:string) - Determines the alignment of the text in the input. Defaults to nil.
  • required_indicator (:boolean) - Visual required indicator, adds an asterisk to label. Defaults to false.
  • variant (:string) - Visual styling options for the TextField. Defaults to "inherit".
  • size (:string) - Changes the size of the input, giving it more or less padding. Defaults to "medium".
  • on_clear_button_click (:any) - Callback fired when clear button is clicked. Defaults to nil.
  • auto_size (:boolean) - Whether the TextField will grow as the text within the input changes. Defaults to false.
  • loading (:boolean) - Indicates the loading state. Defaults to false.
  • phx_focus (:any) - onFocus: Callback fired when input is focused. Defaults to nil.
  • phx_blur (:any) - onBlur: Callback fired when input is blurred. Defaults to nil.
  • phx_click (:any) - onClick. Defaults to nil.
  • phx_key (:any) - onKeyPress. Defaults to nil.
  • phx_keydown (:any) - onKeyDown. Defaults to nil.
  • phx_debounce (:any) - Defaults to nil.
  • phx_throttle (:any) - Defaults to nil.

Slots

  • connected_left - An element connected to the right of the input.
  • connected_right - An element connected to the right of the input.