x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<div class="flex flex-col gap-4 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="Email" 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 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]" > https:// </div> <input placeholder="yoursite.com" data-slot="input-group-control" type="text" 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 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-end" 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-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]" > <i data-lucide="search" class="inline-block shrink-0 w-5 h-5" aria-hidden="true"></i> </div> <input placeholder="Search…" data-slot="input-group-control" type="text" 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 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]" > $ </div> <div role="group" data-slot="input-group-addon" data-align="inline-end" 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-last pr-3 has-[>button]:mr-[-0.45rem] has-[>kbd]:mr-[-0.35rem]" > USD </div> <input placeholder="0.00" data-slot="input-group-control" type="number" 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 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="Invalid email" 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" aria-invalid="true"> </div></div>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<%# Gallery of all addon configurations %><div class="flex flex-col gap-4 max-w-sm"> <%# Icon prefix %> <%= render(UI::InputGroup.new) do |g| %> <%= g.with_addon(align: "inline-start") { |a| a.with_icon(name: "mail") } %> <%= g.with_field(type: :email, placeholder: "Email") %> <% end %> <%# Text prefix %> <%= render(UI::InputGroup.new) do |g| %> <%= g.with_addon(align: "inline-start") { "https://" } %> <%= g.with_field(placeholder: "yoursite.com") %> <% end %> <%# Icon suffix %> <%= render(UI::InputGroup.new) do |g| %> <%= g.with_field(placeholder: "Search…") %> <%= g.with_addon(align: "inline-end") { |a| a.with_icon(name: "search") } %> <% end %> <%# Both sides %> <%= render(UI::InputGroup.new) do |g| %> <%= g.with_addon(align: "inline-start") { "$" } %> <%= g.with_field(type: :number, placeholder: "0.00") %> <%= g.with_addon(align: "inline-end") { "USD" } %> <% end %> <%# Error state %> <%= render(UI::InputGroup.new) do |g| %> <%= g.with_addon(align: "inline-start") { |a| a.with_icon(name: "mail") } %> <%= g.with_field(type: :email, placeholder: "Invalid email", error: true) %> <% end %></div>No notes provided.
No params configured.