Menu
Form 5
<section id="relume">
<div class="pb-5 md:pb-6">
<h2 class="text-xl font-bold md:text-2xl">Personal information</h2>
<p class="mt-2">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.
</p>
</div>
<form class="grid auto-cols-fr grid-cols-1 gap-6">
<div class="grid w-full max-w-md grid-cols-1 gap-6 md:grid-cols-2 md:gap-4">
<div class="grid w-full items-center">
<label
class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2"
for="firstName"
>First name</label
>
<div class="relative flex w-full items-center">
<input
type="text"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="firstName"
value=""
/>
</div>
</div>
<div class="grid w-full items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2" for="lastName"
>Last name</label
>
<div class="relative flex w-full items-center">
<input
type="text"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="lastName"
value=""
/>
</div>
</div>
</div>
<div class="grid w-full max-w-md items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2" for="email"
>Email address</label
>
<div class="relative flex w-full items-center">
<div class="absolute left-3">
<svg
stroke="currentColor"
fill="currentColor"
stroke-width="0"
viewBox="0 0 24 24"
class="size-6"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M20 4H4c-1.103 0-2 .897-2 2v12c0 1.103.897 2 2 2h16c1.103 0 2-.897 2-2V6c0-1.103-.897-2-2-2zm0 2v.511l-8 6.223-8-6.222V6h16zM4 18V9.044l7.386 5.745a.994.994 0 0 0 1.228 0L20 9.044 20.002 18H4z"
></path>
</svg>
</div>
<input
type="email"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 pl-[2.75rem] pr-3"
id="email"
placeholder="hello@relume.io"
value=""
/>
</div>
</div>
<div class="grid w-full max-w-md items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2">Country</label
><button
type="button"
role="combobox"
aria-controls="radix-:R2e:"
aria-expanded="false"
aria-autocomplete="none"
dir="ltr"
data-state="closed"
data-placeholder=""
class="flex min-h-11 w-full items-center justify-between gap-1 whitespace-nowrap border border-border-primary bg-transparent px-3 py-2 text-text-primary focus:outline-none disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 [&[data-state=open]>svg]:rotate-180"
>
<span style="pointer-events: none">Select one...</span
><svg
stroke="currentColor"
fill="none"
stroke-width="0"
viewBox="0 0 15 15"
class="size-5 transition-transform duration-300"
aria-hidden="true"
height="1em"
width="1em"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z"
fill="currentColor"
></path>
</svg></button
><select
aria-hidden="true"
tabindex="-1"
style="
position: absolute;
border: 0;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
word-wrap: normal;
"
>
<option value=""></option>
</select>
</div>
<div class="grid w-full max-w-md items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2" for="street"
>Street address</label
>
<div class="relative flex w-full items-center">
<input
type="text"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="street"
value=""
/>
</div>
</div>
<div class="grid w-full max-w-md grid-cols-1 gap-6 md:grid-cols-3 md:gap-4">
<div class="grid w-full items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2" for="city"
>City</label
>
<div class="relative flex w-full items-center">
<input
type="text"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="city"
value=""
/>
</div>
</div>
<div class="grid w-full items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2" for="state"
>State / Province</label
>
<div class="relative flex w-full items-center">
<input
type="text"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="state"
value=""
/>
</div>
</div>
<div class="grid w-full items-center">
<label class="peer-disabled:cursor-not-allowed peer-disabled:opacity-70 mb-2" for="zip"
>ZIP / Postal code</label
>
<div class="relative flex w-full items-center">
<input
type="text"
class="flex size-full min-h-11 border border-border-primary bg-background-primary py-2 align-middle file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-neutral focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 px-3"
id="zip"
value=""
/>
</div>
</div>
</div>
<div class="mt-5 flex items-center justify-end gap-4 md:mt-6">
<button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary text-text-primary bg-background-primary px-5 py-2"
title="Cancel"
>
Cancel</button
><button
class="focus-visible:ring-border-primary inline-flex gap-3 items-center justify-center whitespace-nowrap ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-border-primary bg-background-alternative text-text-alternative px-5 py-2"
title="Save"
>
Save
</button>
</div>
</form>
</section>
"use client";
import { useState } from "react";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
Input,
Label,
Button,
} from "@relume_io/relume-ui";
import type { ButtonProps } from "@relume_io/relume-ui";
import { BiEnvelope } from "react-icons/bi";
type Props = {
heading: string;
description: string;
buttons: ButtonProps[];
};
export type Form5Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;
export const Form5 = (props: Form5Props) => {
const { heading, description, buttons } = {
...Form5Defaults,
...props,
};
const [firstNameInput, setFirstNameInput] = useState("");
const [lastNameInput, setLastNameInput] = useState("");
const [emailInput, setEmailInput] = useState("");
const [countryInput, setCountryInput] = useState("");
const [streetAddressInput, setStreetAddressInput] = useState("");
const [cityInput, setCityInput] = useState("");
const [stateInput, setStateInput] = useState("");
const [zipInput, setZipInput] = useState("");
const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
event.preventDefault();
console.log({
firstNameInput,
lastNameInput,
emailInput,
countryInput,
streetAddressInput,
cityInput,
stateInput,
zipInput,
});
};
const selectItems = [
{ value: "first-choice", label: "First Choice" },
{ value: "second-choice", label: "Second Choice" },
{ value: "third-choice", label: "Third Choice" },
];
return (
<section id="relume">
<div className="pb-5 md:pb-6">
<h2 className="text-xl font-bold md:text-2xl">{heading}</h2>
<p className="mt-2">{description}</p>
</div>
<form onSubmit={handleSubmit} className="grid auto-cols-fr grid-cols-1 gap-6">
<div className="grid w-full max-w-md grid-cols-1 gap-6 md:grid-cols-2 md:gap-4">
<div className="grid w-full items-center">
<Label htmlFor="firstName" className="mb-2">
First name
</Label>
<Input
type="text"
id="firstName"
value={firstNameInput}
onChange={(e) => setFirstNameInput(e.target.value)}
/>
</div>
<div className="grid w-full items-center">
<Label htmlFor="lastName" className="mb-2">
Last name
</Label>
<Input
type="text"
id="lastName"
value={lastNameInput}
onChange={(e) => setLastNameInput(e.target.value)}
/>
</div>
</div>
<div className="grid w-full max-w-md items-center">
<Label htmlFor="email" className="mb-2">
Email address
</Label>
<Input
type="email"
id="email"
value={emailInput}
icon={<BiEnvelope className="size-6" />}
placeholder="hello@relume.io"
onChange={(e) => setEmailInput(e.target.value)}
/>
</div>
<div className="grid w-full max-w-md items-center">
<Label className="mb-2">Country</Label>
<Select onValueChange={setCountryInput}>
<SelectTrigger>
<SelectValue placeholder="Select one..." />
</SelectTrigger>
<SelectContent>
{selectItems.map((item, index) => (
<SelectItem key={index} value={item.value}>
{item.label}
</SelectItem>
))}
</SelectContent>
</Select>
</div>
<div className="grid w-full max-w-md items-center">
<Label htmlFor="street" className="mb-2">
Street address
</Label>
<Input
type="text"
id="street"
value={streetAddressInput}
onChange={(e) => setStreetAddressInput(e.target.value)}
/>
</div>
<div className="grid w-full max-w-md grid-cols-1 gap-6 md:grid-cols-3 md:gap-4">
<div className="grid w-full items-center">
<Label htmlFor="city" className="mb-2">
City
</Label>
<Input
type="text"
id="city"
value={cityInput}
onChange={(e) => setCityInput(e.target.value)}
/>
</div>
<div className="grid w-full items-center">
<Label htmlFor="state" className="mb-2">
State / Province
</Label>
<Input
type="text"
id="state"
value={stateInput}
onChange={(e) => setStateInput(e.target.value)}
/>
</div>
<div className="grid w-full items-center">
<Label htmlFor="zip" className="mb-2">
ZIP / Postal code
</Label>
<Input
type="text"
id="zip"
value={zipInput}
onChange={(e) => setZipInput(e.target.value)}
/>
</div>
</div>
<div className="mt-5 flex items-center justify-end gap-4 md:mt-6">
{buttons.map((button, index) => (
<Button key={index} {...button}>
{button.title}
</Button>
))}
</div>
</form>
</section>
);
};
export const Form5Defaults: Props = {
heading: "Personal information",
description:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.",
buttons: [
{ title: "Cancel", variant: "secondary", size: "sm" },
{ title: "Save", size: "sm" },
],
};
.svg)
.svg)
Need help?
For installation guidelines and API information, visit the docs.
Examples
No items found.
.avif)
.avif)
.avif)
.webp)
.webp)
.webp)
