Text fields let users enter and edit text.
Text fields allow users to enter text into a UI. They typically appear in forms and dialogs.
Below you can view various implementations and example markup.
The Text Input component is a complete form control including a label, input, and help text. It comes with four variants: simple (default), solid, underline, and unstyled.
The Text Input component is a complete form control including a label, which can be disabled.
Helper text is used to give context about a field's input, such as how the input will be used.
The error `invalid?` attribute toggles the error state. The helper text attribute is then replaced to provide feedback to the user about the error.
The Text Input component is a complete form control including a label, input, and help text. It comes with four variants: simple (default), solid, underline, and unstyled.
The Text Input component is a complete form control including a label, input, and help text. It comes with four variants: simple (default), solid, underline, and unstyled.
The Text Input component is a complete form control including a label, input, and help text. It comes with four variants: simple (default), solid, underline, and unstyled.
API documentation for the component. Learn about imports and available attributes.
There are multiple ways to import components.
# PhoenixUI macro which imports all components
use PhoenixUI
# Or import component individually
import PhoenixUI.Components.Alert
Below is a list of attributes that can be applied to the component.
| Name | Type | Default | Description |
|---|---|---|---|
| HTML attribute | any | Supports all HTML attributes. | |
| align | :center | :inherit | :justify | :left | :right | :inherit | Set the text-align on the component. |
| color | any framework-provided color | :slate | The text color to use. |
| element | Any HTML Element | :p | HTML element to use. |
| extend_class | string | Adds additional classes. | |
| margin | bool | true | If true, the text will have margin. |
| phx-{any} | binding | Supports all Phoenix DOM element bindings. | |
| variant | :h1 | :h2 | :h3 | :h4 | :p | :p | The links to use. |