Translates a form field error tuple into a human-readable string.

By default, interpolates %{key} placeholders with their values from the opts keyword list. To use your own translator (e.g., for Gettext support), configure the :error_translator option:

# config/config.exs
config :elixir_uikit, :error_translator, {MyAppWeb.CoreComponents, :translate_error}

The value is a {module, function} tuple that calls apply(module, function, [{msg, opts}]).

When not configured, uses the default placeholder interpolation.

Renders a UIkit checkbox with label and error messages.

Includes the hidden false value input required for LiveView form handling.

Examples

<.uk_checkbox field={@form[:agree]}>
  <:label>I agree to the terms</:label>
</.uk_checkbox>

<.uk_checkbox name="notifications" checked>
  <:label>Enable <strong>important</strong> notifications</:label>
</.uk_checkbox>

Attributes

• id (:any) - the DOM ID of the checkbox. Defaults to nil.
• name (:any) - the name of the checkbox.
• value (:any) - the value submitted when checked. Defaults to "true".
• checked (:boolean) - whether the checkbox is checked.
• field (Phoenix.HTML.FormField) - a form field struct from the form, e.g. @form[:agree].
• errors (:list) - error messages to display below the checkbox. Defaults to [].
• state (:string) - the UIkit validation state. Defaults to nil. Must be one of nil, "danger", or "success".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes passed to the checkbox input. Supports all globals plus: ["disabled", "form", "required"].

Slots

• label - the label content shown beside the checkbox; supports HTML.

Renders a UIkit fieldset with optional legend slot.

Examples

<.uk_fieldset>
  <:legend>Personal Information</:legend>
  <.uk_input field={@form[:name]} label="Name" />
</.uk_fieldset>

Attributes

• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the fieldset.

Slots

• legend - the fieldset legend text.
• inner_block (required) - the fieldset content.

Renders a UIkit-styled form wrapper.

Wraps <.form> with optional UIkit layout classes.

Examples

<.uk_form for={@form} id="my-form" phx-submit="save">
  ...
</.uk_form>

<.uk_form for={@form} id="my-form" layout="stacked" phx-submit="save">
  ...
</.uk_form>

Attributes

• for (:any) (required) - the form data source (result of to_form/2).
• id (:string) (required) - the DOM ID of the form (required for LiveView).
• layout (:string) - the UIkit form layout — stacked places labels above, horizontal places them beside. Defaults to nil. Must be one of nil, "stacked", or "horizontal".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the form element. Supports all globals plus: ["action", "method", "phx-change", "phx-submit", "phx-trigger-action", "autocomplete"].

Slots

• inner_block (required) - the form fields.

Renders a UIkit form controls wrapper.

Use inside a horizontal form to wrap inputs alongside labels. Use text for checkboxes/radios in horizontal forms to improve alignment.

Examples

<.uk_form_controls>
  <.uk_input name="email" type="email" />
</.uk_form_controls>

<.uk_form_controls text>
  <.uk_checkbox name="agree" label="I agree" />
</.uk_form_controls>

Attributes

• text (:boolean) - adds uk-form-controls-text for checkbox/radio alignment in horizontal forms. Defaults to false.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes.

Slots

• inner_block (required) - the form controls content.

Renders a UIkit form icon — an icon positioned inside an input.

Wrap this around your <.uk_input> (without the outer div) or a plain <input>. The input must have its label managed externally (pass label={nil} to uk_input and use <.uk_form_label> above).

Examples

<.uk_form_label for="user-email">Email</.uk_form_label>
<.uk_form_icon icon="mail">
  <input class="uk-input" type="email" id="user-email" name="user[email]" />
</.uk_form_icon>

<.uk_form_label for="search">Search</.uk_form_label>
<.uk_form_icon icon="search" flip clickable>
  <input class="uk-input" type="search" id="search" name="search" />
</.uk_form_icon>

Attributes

• icon (:string) (required) - the UIkit icon name.
• flip (:boolean) - positions the icon on the right side (uk-form-icon-flip). Defaults to false.
• clickable (:boolean) - renders the icon as a clickable <a> element. Defaults to false.
• class (:any) - additional CSS classes for the icon element. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the icon element. Supports all globals plus: ["href", "navigate", "patch", "phx-click"].

Slots

• inner_block (required) - the input element.

Renders a UIkit form label.

Examples

<.uk_form_label for="user-email">Email</.uk_form_label>

Attributes

• for (:string) - the id of the associated form control. Defaults to nil.
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes for the label.

Slots

• inner_block (required) - the label text.

Renders a UIkit input with label and error messages.

Accepts a Phoenix.HTML.FormField via the field attribute for automatic id, name, value, and error extraction. All attributes can also be passed explicitly when not using a form field.

Types

Supports all standard HTML input types. Use type="select" to render a <select> and type="textarea" to render a <textarea>.

For checkboxes, use <.uk_checkbox> instead (handles hidden field for false value).

Pass margin to add UIkit's uk-margin class to the generated wrapper for non-hidden inputs.

Examples

<.uk_input field={@form[:email]} type="email" margin>
  <:label>Email</:label>
</.uk_input>

<.uk_input field={@form[:username]} size="large">
  <:label>Username <span class="uk-text-danger">*</span></:label>
</.uk_input>

<.uk_input field={@form[:bio]} type="textarea" rows="4">
  <:label>Bio</:label>
</.uk_input>

<.uk_input field={@form[:role]} type="select"
           options={["Admin": "admin", "User": "user"]}>
  <:label>Role</:label>
</.uk_input>

<.uk_input name="search" type="search" placeholder="Search..." />

Attributes

• id (:any) - the DOM ID of the input. Defaults to nil.
• name (:any) - the name of the input.
• value (:any) - the input value.
• type (:string) - the HTML input type, or select/textarea. 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 from the form, e.g. @form[:email].
• errors (:list) - error messages to display below the input. Defaults to [].
• prompt (:string) - a blank prompt option for select inputs. Defaults to nil.
• options (:list) - options for select inputs (see Phoenix.HTML.Form.options_for_select/2).
• multiple (:boolean) - allow multiple selections in a select. Defaults to false.
• size (:string) - the UIkit size modifier. Defaults to nil. Must be one of nil, "small", or "large".
• width (:string) - the UIkit form width modifier. Defaults to nil. Must be one of nil, "xsmall", "small", "medium", or "large".
• state (:string) - the UIkit validation state; automatically set to danger when there are errors. Defaults to nil. Must be one of nil, "danger", or "success".
• blank (:boolean) - minimizes form control styling (uk-form-blank). Defaults to false.
• class (:any) - additional CSS classes. Defaults to nil.
• margin (:boolean) - adds uk-margin to the wrapper for non-hidden inputs. Defaults to false.
• Global attributes are accepted. arbitrary HTML attributes passed to the input element. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "step"].

Slots

• label - the label content; supports HTML for custom styling.

Renders a UIkit radio input.

Use multiple <.uk_radio> components with the same name to create a group.

Examples

<.uk_radio field={@form[:role]} value="admin">
  <:label>Admin</:label>
</.uk_radio>
<.uk_radio field={@form[:role]} value="user">
  <:label>User</:label>
</.uk_radio>

<.uk_radio name="color" value="red">
  <:label><span class="uk-text-danger">Red</span></:label>
</.uk_radio>

Attributes

• id (:any) - the DOM ID of the radio input. Defaults to nil.
• name (:any) - the name of the radio group.
• value (:any) (required) - the value submitted when this radio is selected.
• checked (:boolean) - whether this radio is selected. Defaults to false.
• field (Phoenix.HTML.FormField) - a form field struct from the form, e.g. @form[:role].
• state (:string) - the UIkit validation state. Defaults to nil. Must be one of nil, "danger", or "success".
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes passed to the radio input. Supports all globals plus: ["disabled", "form", "required"].

Slots

• label - the label content shown beside the radio; supports HTML.

Renders a UIkit range slider.

Examples

<.uk_range field={@form[:volume]} min="0" max="100" step="1">
  <:label>Volume</:label>
</.uk_range>

<.uk_range name="opacity" min="0" max="1" step="0.1" />

Attributes

• id (:any) - the DOM ID of the range input. Defaults to nil.
• name (:any) - the name of the range input.
• value (:any) - the current value.
• field (Phoenix.HTML.FormField) - a form field struct from the form, e.g. @form[:volume].
• errors (:list) - error messages. Defaults to [].
• class (:any) - additional CSS classes. Defaults to nil.
• Global attributes are accepted. arbitrary HTML attributes passed to the range input. Supports all globals plus: ["min", "max", "step", "disabled", "form", "required"].

Slots

• label - the label content; supports HTML for custom styling.