OctantisWeb.Components.Polaris.TextField (octantis v0.1.2)
View SourceA 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 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 tonil
.suffix
(:string
) - Text to display after value. Defaults tonil
.placeholder
(:string
) - Hint text to display. Defaults tonil
.field
(Phoenix.HTML.FormField
) (required) - The Phoenix Form Field.help_text
(:string
) - Additional hint text to display. Defaults tonil
.label
(:string
) - Label for the input.label_action
(:any
) - Adds an action to the label. Defaults tonil
.label_hidden
(:boolean
) - Visually hide the label. Defaults tofalse
.disabled
(:boolean
) - Disable the input. Defaults tofalse
.clear_button
(:boolean
) - Show a clear text button in the input. Defaults tofalse
.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 tonil
.read_only
(:boolean
) - Disable editing of the input. Defaults tofalse
.auto_focus
(:boolean
) - Automatically focus the input. Defaults tofalse
.focused
(:boolean
) - Force the focus state on the input. Defaults tofalse
.multiline
(:integer
) - Allow for multiple lines of input. Defaults tonil
.error
(:string
) - Error to display beneath the label.type
(:string
) - Determine type of input. Defaults to"text"
.name
(:string
) - Name of the input. Defaults tonil
.id
(:string
) - ID for the input.role
(:string
) - Defines a specific role attribute for the input. Defaults tonil
.step
(:integer
) - Limit increment value for numeric and date-time inputs. Defaults tonil
.auto_complete
(:string
) - Enable automatic completion by the browser. Set to off when you do not want the browser to fill in info. Defaults tonil
.max
(:string
) - Mimics the behavior of the native HTML attribute, limiting the maximum value. Defaults tonil
.max_length
(:integer
) - Maximum character length for an input. Defaults tonil
.max_height
(:integer
) - Maximum height of the input element. Only applies when multiline is true. Defaults tonil
.min
(:string
) - Mimics the behavior of the native HTML attribute, limiting the minimum value. Defaults tonil
.min_length
(:integer
) - Minimum character length for an input. Defaults tonil
.pattern
(:string
) - A regular expression to check the value against. Defaults tonil
.input_mode
(:string
) - Choose the keyboard that should be used on mobile devices. Defaults tonil
.spell_check
(:boolean
) - Indicate whether value should have spelling checked. Defaults tonil
.aria_owns
(:string
) - Indicates the id of a component owned by the input. Defaults tonil
.aria_expanded
(:boolean
) - Indicates whether or not a Popover is displayed. Defaults tonil
.aria_controls
(:string
) - Indicates the id of a component controlled by the input. Defaults tonil
.aria_active_descendant
(:string
) - Indicates the id of a related components visually focused element to the input. Defaults tonil
.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 tonil
.required_indicator
(:boolean
) - Visual required indicator, adds an asterisk to label. Defaults tofalse
.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 tonil
.auto_size
(:boolean
) - Whether the TextField will grow as the text within the input changes. Defaults tofalse
.loading
(:boolean
) - Indicates the loading state. Defaults tofalse
.phx_focus
(:any
) - onFocus: Callback fired when input is focused. Defaults tonil
.phx_blur
(:any
) - onBlur: Callback fired when input is blurred. Defaults tonil
.phx_click
(:any
) - onClick. Defaults tonil
.phx_key
(:any
) - onKeyPress. Defaults tonil
.phx_keydown
(:any
) - onKeyDown. Defaults tonil
.phx_debounce
(:any
) - Defaults tonil
.phx_throttle
(:any
) - Defaults tonil
.
Slots
connected_left
- An element connected to the right of the input.connected_right
- An element connected to the right of the input.