Renders a button.

Attributes

• :type - The type of the button. Defaults to "button". Acceptable values are:

  • "button"
  • "submit"

• :class - Additional CSS classes to apply to the button. Defaults to an empty string.

• :theme - The theme of the button. Acceptable values are:

  • "primary"
  • "secondary"
  • "danger"
  • "success"
  • "warning"
  • "custom"

• :size - The padding size of the button. Defaults to "md". Acceptable values are:

  • "sm" - Small
  • "md" - Medium
  • "lg" - Large

• :tooltip - A tooltip to display when the button is disabled. Defaults to nil.

• :rest - Any additional global attributes (e.g., id, disabled, form, name, value) that should be applied to the button.

Slots

• :inner_block (required) - The content to render inside the button.

Examples

Basic button:

<.button>Click me</.button>

Button with a click event:

<.button phx-click="submit_form">Submit</.button>

Button with a custom class:

<.button class="ml-4">Custom Button</.button>

Button with a theme:

<.button theme="primary">Primary Button</.button>
<.button theme="danger">Danger Button</.button>

Button with a size:

<.button size="sm">Small Button</.button>
<.button size="lg">Large Button</.button>

Button with a tooltip (visible when disabled):

<.button disabled={true} tooltip="You cannot click this button right now">
  Disabled Button
</.button>

Button with additional attributes:

<.button id="my-button" name="action" value="save" phx-click="save_data">
  Save
</.button>

Notes

• The theme attribute applies predefined styles to the button. If you use the "custom" theme, no theme-specific styles will be applied, allowing you to fully customize the button using the :class attribute.
• The size attribute adjusts the padding and dimensions of the button.
• If the tooltip attribute is provided and the button is disabled, a tooltip will be displayed to explain why the button is not clickable.

Attributes

• type (:string) - Defaults to "button".
• class (:any) - Defaults to "".
• theme (:string) - Must be one of "primary", "secondary", "danger", "success", "warning", or "custom".
• size (:string) - Defaults to "md".
• tooltip (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["id", "disabled", "form", "name", "value"].

Slots

• inner_block (required)

Renders a link, styled like a button.

For available options, see Phoenix.Component.link/1.

Attributes

• class (:any) - Defaults to "".
• theme (:string) (required) - Must be one of "primary", "secondary", "danger", "success", "warning", or "custom".
• size (:string) - Defaults to "md".
• Global attributes are accepted. Supports all globals plus: ["id", "href", "patch", "navigate", "replace", "method", "csrf_token", "download", "hreflang", "referrerpolicy", "rel", "target", "type"].

Slots

• inner_block (required)

Renders a checkbox input element.

This function is used internally by input/1 and generally should not be used directly.

Look at input type="checkbox" to see how these values attr get populated

Attributes

• id (:string) - Defaults to nil.
• name (:string) (required)
• value (:any) (required)
• class (:string)
• checked (:boolean) - the checked flag for checkbox inputs.
• checked_value (:any) - Defaults to "true".
• unchecked_value (:any) - Defaults to "false".
• hidden_input (:boolean) - Defaults to true.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "readonly", "required"].

Generates a generic error message.

Slots

• inner_block (required)

Generic wrapper for rendering error messages in custom input components.

Attributes

• field (Phoenix.HTML.FormField) (required)

Generates hidden inputs for a form. Adapted from PhoenixHTMLHelpers.Form.html#hidden_inputs_for/1

Attributes

• form (Phoenix.HTML.Form) (required)

Renders an input with label and error messages.

A Phoenix.HTML.FormField may be passed as argument, which is used to retrieve the input name, id, and values. Otherwise all attributes may be passed explicitly.

Types

This function accepts all HTML input types, considering that:

• You may also set type="select" to render a <select> tag

• type="checkbox" is used exclusively to render boolean values

• type="tag" renders a tag input with comma-separated values

• For live file uploads, see Phoenix.Component.live_file_input/1

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information.

Examples

<.input field={@form[:email]} type="email" />
<.input name="my-input" errors={["oh no!"]} />
<.input field={@form[:tags]} type="tag" />

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• label (:string) - Defaults to nil.
• sublabel (:string) - Defaults to nil.
• value (:any)
• type (:string) - Defaults to "text".
• field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
• errors (:list) - Defaults to [].
• checked (:boolean) - the checked flag for checkbox/radio inputs.
• checked_value (:any) - the value to be sent when the checkbox is checked. Defaults to 'true'. Defaults to "true".
• unchecked_value (:any) - the value to be sent when the checkbox is unchecked, Defaults to 'false'. Defaults to "false".
• hidden_input (:boolean) - controls if this function will generate a hidden input to submit the unchecked value or not. Defaults to 'true'. Defaults to true.
• prompt (:string) - the prompt for select inputs. Defaults to nil.
• options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
• multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
• button_placement (:string) - Defaults to nil.
• placeholder (:string) - Defaults to "".
• class (:string) - Defaults to "".
• stretch (:boolean) - control the wrapping div classes of some components like the textarea. Defaults to false.
• display_errors (:boolean) - Defaults to true.
• tooltip (:any) - Defaults to nil.
• on_click (:string) - Defaults to nil.
• value_key (:any) - Defaults to nil.
• standalone (:boolean) - indicates if the tag input operates independently of a form's validation flow. Defaults to false.
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Slots

• inner_block

Renders an input element.

This function is used internally by input/1 and generally should not be used directly.

In the case of inputs that are different enough to warrant a new function, this component can be used to maintain style consistency.

Attributes

• id (:string) - Defaults to nil.
• name (:string) (required)
• type (:string) (required)
• value (:any)
• errors (:list) - Defaults to [].
• class (:string) - Defaults to "".
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Renders a label.

Attributes

• for (:any) - Defaults to nil.
• class (:any) - Defaults to "".
• Global attributes are accepted.

Slots

• inner_block (required)

Attributes

• tooltip (:any) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["id", "disabled", "form", "name", "value", "class", "type"].

Slots

• inner_block (required)

Renders a textarea element.

This function is used internally by input/1 and generally should not be used directly.

Look at input type="textarea" to see how these values attr get populated

Attributes

• id (:string) - Defaults to nil.
• name (:string) (required)
• value (:any)
• errors (:list) - Defaults to [].
• class (:string) - Defaults to "".
• Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].