Previews

No matching results.

x
1
2
3
4
5
6
7
8
<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" data-controller="ui--password-visibility">
<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]" >
<button type="button" class="justify-center whitespace-nowrap font-medium transition-all focus:outline-none focus:ring-primary ring-offset-background disabled:pointer-events-none disabled:text-muted-foreground! hover:bg-accent hover:text-accent-foreground disabled:bg-transparent! py-2 disabled:cursor-not-allowed text-sm flex items-center h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2 focus:ring-0 focus:ring-offset-0 focus-visible:ring-2 focus-visible:ring-offset-1" aria-label="Show password" aria-pressed="false" data-action="ui--password-visibility#toggle" data-ui--password-visibility-target="toggle"><span class="inline-flex" data-ui--password-visibility-target="iconShow"><i data-lucide="eye" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
</span><span class="inline-flex" style="display: none" data-ui--password-visibility-target="iconHide"><i data-lucide="eye-off" class="inline-block shrink-0 w-4 h-4" aria-hidden="true"></i>
</span></button>
</div>
<input id="ui-password-88d60406" data-ui--password-visibility-target="input" data-slot="input-group-control" name="user[password]" placeholder="Enter your password" type="password" 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>
1
2
3
4
5
6
7
render(UI::PasswordInput.new(
name: "user[password]",
placeholder: placeholder,
required: required,
disabled: disabled,
error: error
))
Param Description Input

—

—

—

—