VelvetKit

Previews

No matching results.

x
1
2
3
4
5
6
7
8
<div class="max-w-sm">
  <div data-slot="input-group" role="group" class="group/input-group relative flex w-full items-center rounded-md border border-input bg-background transition-all h-9 min-w-0 has-[>textarea]:h-auto has-[>[data-align=inline-start]]:[&>input]:pl-2 has-[>[data-align=inline-end]]:[&>input]:pr-2 has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3 has-[[data-slot]:focus]:ring-2 has-[[data-slot]:focus]:ring-primary has-[[data-slot]:focus]:ring-offset-1 ring-offset-background has-[[data-slot][aria-invalid=true]:enabled]:border-destructive has-[[data-slot][aria-invalid=true]:enabled]:ring-destructive has-[input:disabled]:border-input has-[input:disabled]:bg-muted has-[input:disabled]:opacity-50" >
    <div role="group" data-slot="input-group-addon" data-align="inline-start" class="text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 group-data-[disabled=true]/input-group:opacity-50 order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]" >
      <i data-lucide="mail" class="inline-block shrink-0 w-5 h-5" aria-hidden="true"></i>
    </div>
    <input placeholder="you@example.com" data-slot="input-group-control" type="email" class="flex-1 w-full h-9 px-3 py-2 text-sm rounded-md text-foreground placeholder:text-muted-foreground border-0! bg-transparent shadow-none! outline-none! focus:outline-none! focus:outline-none! focus:ring-0! dark:bg-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:bg-muted/50">
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
<%# Playground template for UI::InputGroupPreview %>
<div class="max-w-sm">
  <%= render(UI::InputGroup.new) do |g| %>
    <% if left_icon %>
      <%= g.with_addon(align: "inline-start") { render(UI::Icon.new(name: icon_name)) } %>
    <% end %>
    <%= g.with_field(type: :email, placeholder: "you@example.com", error: error, disabled: disabled) %>
    <% if right_icon %>
      <%= g.with_addon(align: "inline-end") { render(UI::Icon.new(name: icon_name)) } %>
    <% end %>
  <% end %>
</div>

No notes provided.

Param Description Input

—

—

—

—

—

—