FlowbitePhoenix.Components.Forms (FlowbitePhoenix v0.1.2)

View Source

Form components for FlowbitePhoenix using Flowbite CSS framework.

This module provides form-related components including inputs, buttons, toggles, and form containers with consistent Flowbite styling.

Summary

Functions

Renders a button with Flowbite styling and multiple variants.

Generates a generic error message with Flowbite styling.

Renders an input with label and error messages using Flowbite styling.

Renders a label with Flowbite styling.

Renders a simple form with Flowbite styling.

Renders a toggle switch component using Flowbite styling.

Functions

button(assigns)

Renders a button with Flowbite styling and multiple variants.

Examples

<.button>Send!</.button>
<.button phx-click="go" color="alternative">Cancel</.button>
<.button loading={true} color="blue">Loading...</.button>
<.button variant="outline" color="red">Delete</.button>

Attributes

  • type (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • loading (:boolean) - Defaults to false.
  • variant (:string) - Defaults to "default". Must be one of "default", or "outline".
  • color (:string) - Defaults to "blue". Must be one of "blue", "alternative", "dark", "light", "green", "red", "yellow", or "purple".
  • size (:string) - Defaults to "default". Must be one of "xs", "sm", "default", "lg", or "xl".
  • Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

  • inner_block (required)

error(assigns)

Generates a generic error message with Flowbite styling.

Slots

  • inner_block (required)

input(assigns)

Renders an input with label and error messages using Flowbite styling.

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

  • 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. Unsupported types, such as hidden and radio, are best written directly in your templates.

Examples

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

Attributes

  • id (:any) - Defaults to nil.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any)
  • type (:string) - Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "search", "select", "tel", "text", "textarea", "time", "url", or "week".
  • 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 inputs.
  • 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.
  • 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"].

label(assigns)

Renders a label with Flowbite styling.

Attributes

  • for (:string) - Defaults to nil.

Slots

  • inner_block (required)

simple_form(assigns)

Renders a simple form with Flowbite styling.

Examples

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:email]} label="Email"/>
  <.input field={@form[:username]} label="Username" />
  <:actions>
    <.button>Save</.button>
  </:actions>
</.simple_form>

Attributes

  • for (:any) (required) - the data structure for the form.
  • as (:any) - the server side parameter to collect all input under. Defaults to nil.
  • Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target", "multipart"].

Slots

  • inner_block (required)
  • actions - the slot for form actions, such as a submit button.

toggle(assigns)

Renders a toggle switch component using Flowbite styling.

Examples

<.toggle name="notifications" label="Enable notifications" />
<.toggle name="dark_mode" label="Dark mode" checked={true} />

Attributes

  • id (:string) - Defaults to nil.
  • name (:string) (required)
  • label (:string) - Defaults to nil.
  • checked (:boolean) - Defaults to false.
  • class (:string) - Defaults to "".
  • Global attributes are accepted.