Corex.NativeInput (Corex v0.1.0-alpha.33)

View Source

Unified native input component based on Phoenix Core Components Used for text, textarea, date, datetime-local, time, month, week, email, url, tel, search, color, number, password, checkbox, radio, and select. Optional icon slot and shared styling via data-scope="native-input". Uses same data-part structure as Corex components (root, label, control, input, error) for consistency.

The icon slot is ignored for textarea, date/time types, color, number, checkbox, radio, and select.

For text, email, url, tel, search, and password the icon slot is shown when provided.

Examples

Basic

<.native_input type="text" id="name" name="user[name]" class="native-input">
  <:label>Name</:label>
</.native_input>

With icon

<.native_input type="email" id="email" name="user[email]" class="native-input">
  <:label>Email</:label>
  <:icon><.heroicon name="hero-envelope" class="icon" /></:icon>
</.native_input>

Textarea (icon slot ignored)

<.native_input type="textarea" id="bio" name="user[bio]" class="native-input">
  <:label>Bio</:label>
</.native_input>

Checkbox, select, radio

<.native_input type="checkbox" name="user[agree]" class="native-input">
  <:label>I agree</:label>
</.native_input>
<.native_input type="select" name="user[role]" options={["Admin": "admin", "User": "user"]} prompt="Choose..." class="native-input">
  <:label>Role</:label>
</.native_input>
<.native_input type="radio" name="user[size]" options={["Small": "s", "Medium": "m", "Large": "l"]} value="m" class="native-input">
  <:label>Size</:label>
</.native_input>

With form field

Use field={f[:key]} or field={@form[:key]} with a form built from an Ecto changeset. Set the form id with Corex.Form.get_form_id/1. See the Checkbox or NumberInput component docs for the full Controller and Live View pattern.

<.form :let={f} for={@form} id={Corex.Form.get_form_id(@form)}>
  <.native_input type="email" field={f[:email]} class="native-input">
    <:label>Email</:label>
    <:error :let={msg}>{msg}</:error>
  </.native_input>
</.form>

Styling

Use data attributes to target elements:

[data-scope="native-input"][data-part="root"] {}
[data-scope="native-input"][data-part="label"] {}
[data-scope="native-input"][data-part="control"] {}
[data-scope="native-input"][data-part="icon"] {}
[data-scope="native-input"][data-part="input"] {}
[data-scope="native-input"][data-part="error"] {}

The root has data-no-icon when no icon is shown (icon slot empty or type is textarea/date/time), so the input uses full-width padding. Use the class native-input for default Corex styling.

If you wish to use the default Corex styling, you can use the class native-input on the component. This requires to install Mix.Tasks.Corex.Design first and import the component css file.

@import "../corex/main.css";
@import "../corex/tokens/themes/neo/light.css";
@import "../corex/components/native-input.css";

Summary

Components

native_input(assigns)

Components

native_input(assigns)

Attributes

  • type (:string) (required) - Must be one of "text", "textarea", "date", "datetime-local", "time", "month", "week", "email", "url", "tel", "search", "color", "number", "password", "checkbox", "radio", or "select".
  • id (:string)
  • name (:string)
  • value (:any)
  • errors (:list) - List of error messages to display. Defaults to [].
  • class (:any) - Defaults to nil.
  • prompt (:string) - Prompt for select inputs. Defaults to nil.
  • options (:list) - Options for select and radio. Same format as options_for_select. Defaults to nil.
  • multiple (:boolean) - Multiple flag for select inputs. Defaults to false.
  • checked (:boolean) - Checked flag for checkbox. Defaults from value.
  • field (Phoenix.HTML.FormField) - A form field struct from the form, e.g. @form[:email].
  • Global attributes are accepted. Supports all globals plus: ["autocomplete", "disabled", "maxlength", "minlength", "pattern", "placeholder", "readonly", "required", "cols", "rows", "list", "form", "min", "max", "step", "accept"].

Slots

  • label - Accepts attributes:
    • class (:string)
  • icon - Optional. Ignored for textarea, date, datetime-local, time, month, week, color, number, checkbox, radio, select. Accepts attributes:
    • class (:string)
  • error - Accepts attributes:
    • class (:string)