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"].

Join items, specificaly text fields.

Slots

• left
• inner_block (required)
• right

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

• https://polaris.shopify.com/components/selection-and-input/text-field
• https://github.com/Shopify/polaris/blob/main/polaris-react/src/components/TextField/TextField.tsx

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.