View Source Shino.UI.Input (shino v0.1.1-alpha.0)

Provides input related components.

About main attrs

All components in this module accept four main attrs:

:field - a Phoenix.HTML.FormField struct
:id
:name
:value

When a :field attr is passed, :id, :name and :value can be retrieved from it. So, it's not necessary to specify them:

<input field={@form[:username]} type="text" />

Otherwise :name, :value should be passed explicitly:

<input name="username" value={@username} type="text" />

About file uploads

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

More information of inputs

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information. Unsupported inputs are best written directly in your templates.

Notes

Differents from other components, input components are using focus:, instead of focus-visible:.

References

shadcn/ui - Input

Summary

Functions

checkbox(assigns)

Renders a checkbox.

input(assigns)

Renders an input.

select(assigns)

Renders a select.

switch(assigns)

Renders a switch.

textarea(assigns)

Renders a textarea.

Functions

checkbox(assigns)

Renders a checkbox.

In theory, this is this component should be implemented within the input component, but to avoid complicating the attrs of input component, an additional component was created.

Notes

To make this component pretty by default, extra style is added. If you find If you find that this component does not meet your needs, feel free to submit a PR.

Examples

<.checkbox field={@form[:remember_me]} label="Remember me" />

Attributes

field (Phoenix.HTML.FormField)
id (:any) - Defaults to nil.
name (:any)
value (:any)
label (:string) - Defaults to nil.
checked (:boolean)
class (:string) - Defaults to nil.
Global attributes are accepted.

input(assigns)

Renders an input.

Examples

<.input field={@form[:email]} type="email" placeholder="Enter your email" />

Attributes

field (Phoenix.HTML.FormField)
id (:any) - Defaults to nil.
name (:any)
value (:any)
type (:string) - Defaults to "text".
class (:string) - Defaults to nil.
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"].

select(assigns)

Renders a select.

Examples

<select
  field={@form[:time_range]}
  options={[
    "Today": "today",
    "Yesterday": "yesterday",
    "Current Month": "current-month",
    "Current Year": "current-year"
  ]}
/>

For the detail of :options attr, read the doc of Phoenix.HTML.Form.options_for_select/2.

Attributes

field (Phoenix.HTML.FormField)
id (:any) - Defaults to nil.
name (:string)
value (:string)
prompt (:string) - Defaults to nil.
options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
multiple (:boolean) - Defaults to false.
class (:string) - Defaults to nil.
Global attributes are accepted.

switch(assigns)

Renders a switch.

This is a actually a checkbox with fancy style.

Some people also call it toggle.

Examples

<.switch field={@form[:force_update]} />

Attributes

field (Phoenix.HTML.FormField)
id (:any) - Defaults to nil.
name (:any)
value (:any)
checked (:boolean)
class (:string) - Defaults to nil.
disabled (:boolean) - Defaults to false.
Global attributes are accepted.

textarea(assigns)

Renders a textarea.

Examples

<.textarea field={@form[:body]} class="resize-none" rows="6" />

Attributes

field (Phoenix.HTML.FormField)
id (:any) - Defaults to nil.
name (:string)
value (:string)
class (:string) - Defaults to nil.
Global attributes are accepted. Supports all globals plus: ["rows"].