Phlex Components
x
1
2
3
4
5
6
7
8
9
<div>
  <form class="w-full max-w-sm">
    <div class="space-y-4">
      <div class="space-y-2"><label class="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" for="username">Username</label><input type="string" class="flex h-9 w-full rounded-md border bg-background px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:outline-none focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 border-border focus-visible:ring-ring placeholder:text-muted-foreground" placeholder="Username" id="username">
        <p class="text-[0.8rem] text-muted-foreground">Can only contain letters, numbers, and underscores.</p>
      </div>
      <button type="button submit" class="whitespace-nowrap inline-flex items-center justify-center rounded-md font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 bg-primary text-primary-foreground shadow hover:bg-primary/90 px-4 py-2 h-9 text-sm">Submit</button></div>
  </form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
render(TestView.new) do
  Form(class: "w-full max-w-sm") do
    FormSpacer do
      FormItem do
        Label(for: "username") { "Username" }
        Input(type: "string", placeholder: "Username", id: "username")
        Hint { "Can only contain letters, numbers, and underscores." }
      end
      Button(type: "submit") { "Submit" }
    end
  end
end

with button

No params configured.