51 lines
2.1 KiB
Plaintext
51 lines
2.1 KiB
Plaintext
@page "/forms"
|
|
|
|
<PageTitle>Forms</PageTitle>
|
|
|
|
<div class="space-y-6 max-w-lg">
|
|
<div>
|
|
<h1 class="text-3xl font-bold tracking-tight">Forms Demo</h1>
|
|
<p class="text-muted-foreground">All input components — fully static SSR with htmx validation.</p>
|
|
</div>
|
|
|
|
<HtmxForm Endpoint="/api/contact">
|
|
<FormField Label="Full Name" For="name">
|
|
<TextInput Id="name" Name="name" Placeholder="Jane Doe" data-testid="input-name" />
|
|
</FormField>
|
|
|
|
<FormField Label="Email" For="email">
|
|
<TextInput Id="email" Name="email" Type="email" Placeholder="jane@example.com" data-testid="input-email" />
|
|
</FormField>
|
|
|
|
<FormField Label="Password" For="password">
|
|
<TextInput Id="password" Name="password" Type="password" Placeholder="••••••••" data-testid="input-password" />
|
|
</FormField>
|
|
|
|
<FormField Label="Age" For="age">
|
|
<NumberInput Id="age" Name="age" Placeholder="25" Min="0" Max="150" data-testid="input-age" />
|
|
</FormField>
|
|
|
|
<FormField Label="Birth Date" For="birthdate">
|
|
<DateInput Id="birthdate" Name="birthdate" data-testid="input-birthdate" />
|
|
</FormField>
|
|
|
|
<FormField Label="Preferred Time" For="preferredtime">
|
|
<TimeInput Id="preferredtime" Name="preferredtime" data-testid="input-time" />
|
|
</FormField>
|
|
|
|
<FormField Label="Appointment" For="appointment">
|
|
<DateTimeInput Id="appointment" Name="appointment" data-testid="input-appointment" />
|
|
</FormField>
|
|
|
|
<FormField Label="Confirmation" For="confirmation">
|
|
<TextInput Id="confirmation" Name="confirmation" Placeholder='Type "CONFIRM"' data-testid="input-confirmation" />
|
|
</FormField>
|
|
|
|
<div class="flex gap-2 pt-2">
|
|
<Button Type="submit" data-testid="btn-submit">Submit</Button>
|
|
<Button Type="reset" Variant="@ButtonVariant.Outline" data-testid="btn-reset">Reset</Button>
|
|
<Button Variant="@ButtonVariant.Destructive" Disabled="true" data-testid="btn-disabled">Disabled</Button>
|
|
</div>
|
|
</HtmxForm>
|
|
</div>
|