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
<div class="flex flex-col gap-4 max-w-md"> <div class="flex flex-col gap-2 w-full"> <label for="ui-textarea-13b1d072" class="text-sm font-medium">Bio</label> <textarea id="ui-textarea-13b1d072" rows="3" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 px-3 py-2 text-sm resize-y">Rails developer who likes accessible UI.</textarea> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-textarea-c9bd87bc" class="text-sm font-medium">Reason<span class="text-destructive ml-0.5"> *</span></label> <textarea placeholder="Required" id="ui-textarea-c9bd87bc" rows="3" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 px-3 py-2 text-sm resize-y" required="required"></textarea> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-textarea-4696f006" class="text-sm font-medium">Summary</label> <textarea id="ui-textarea-4696f006" rows="3" class="flex w-full rounded-md border bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 px-3 py-2 text-sm resize-y border-destructive focus:ring-destructive" aria-invalid="true">Too short</textarea> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-textarea-933e157d" class="text-sm font-medium text-muted-foreground cursor-not-allowed">Notes</label> <textarea id="ui-textarea-933e157d" rows="3" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 px-3 py-2 text-sm resize-y" disabled="disabled">Locked after review</textarea> </div> <div class="flex flex-col gap-2 w-full"> <label for="ui-textarea-c9563f43" class="text-sm font-medium">Fixed size</label> <textarea placeholder="Can't be resized" id="ui-textarea-c9563f43" rows="3" class="flex w-full rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground transition-all focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-1 ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 px-3 py-2 text-sm resize-none"></textarea> </div></div>1
2
3
4
5
6
7
<div class="flex flex-col gap-4 max-w-md"> <%= render(UI::Textarea.new(label: "Bio", value: "Rails developer who likes accessible UI.")) %> <%= render(UI::Textarea.new(label: "Reason", required: true, placeholder: "Required")) %> <%= render(UI::Textarea.new(label: "Summary", error: true, value: "Too short")) %> <%= render(UI::Textarea.new(label: "Notes", disabled: true, value: "Locked after review")) %> <%= render(UI::Textarea.new(label: "Fixed size", resize: :none, placeholder: "Can't be resized")) %></div>No notes provided.
No params configured.