An input with a label that floats above the field when it's focused or filled. The label doubles as the visual placeholder when the field is empty.

Supports Phoenix.HTML.FormField integration via the field attribute.

Examples

<.floating_label label="Email" type="email" name="email" />
<.floating_label label="Data de publicação" type="date" name="date" />
<.floating_label label="Senha" type="password" name="password" size="lg" />
<.floating_label label="Primeiro nome" field={@form[:first_name]} />

Attributes

• label (:string) (required)
• type (:string) - Defaults to "text".
• name (:string) - Defaults to nil.
• id (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• size (:string) - Defaults to "md".
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• field (Phoenix.HTML.FormField) - a form field struct, e.g. @form[:email].
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "required", "maxlength", "pattern", "readonly", "phx-debounce"].

A text input with an optional inline prefix or suffix label inside the field box.

Examples

<.label_input prefix="https://" placeholder="URL" name="url" />
<.label_input suffix=".com" placeholder="domain name" name="domain" />
<.label_input prefix="€" suffix="EUR" type="number" placeholder="0.00" name="price" />
<.label_input prefix="Data de publicação" type="date" name="date" />

Attributes

• type (:string) - Defaults to "text".
• prefix (:string) - Defaults to nil.
• suffix (:string) - Defaults to nil.
• placeholder (:string) - Defaults to nil.
• size (:string) - Defaults to "md".
• name (:string) - Defaults to nil.
• id (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["autocomplete", "required", "maxlength", "pattern", "readonly", "phx-debounce"].

A select field with an inline prefix label inside the field box.

Examples

<.label_select prefix="Tipo" options={[{"Pessoal", "personal"}, {"Empresa", "business"}]} />
<.label_select prefix="País" options={@countries} prompt="Selecionar..." name="country" />

Attributes

• prefix (:string) (required)
• options (:list) (required)
• prompt (:string) - Defaults to nil.
• size (:string) - Defaults to "md".
• name (:string) - Defaults to nil.
• id (:string) - Defaults to nil.
• value (:any) - Defaults to nil.
• disabled (:boolean) - Defaults to false.
• class (:string) - Defaults to nil.
• Global attributes are accepted.