Form Inputs
1. UnitInput
Input field with a unit selector for area measurements.
Enter carpet area.
Import
import { UnitInput } from "@/components/ui/UnitInput/UnitInput";Usage
<UnitInput
label="Area"
value={{ value: "1200", unit: "sqft" }}
units={["sqft", "sqmts"]}
onChange={() => {}}
// placeholder="Enter area"
// variant="outline"
// status="default"
// helperText="Enter carpet area."
// required={true}
// disabled={false}
/>2. RichTextInput
Rich text editor supporting formatting, lists, and hyperlinks.
Supports bold, italic, underline, lists and links.
Import
import { RichTextInput } from "@/components/ui/RichTextInput/RichTextInput";Usage
<RichTextInput
label="About Builder"
value="<p>Builder Description</p>"
onChange={() => {}}
// required={true}
// placeholder="Write about the builder..."
// helperText="Supports bold, italic, underline, lists and links."
// status="default"
/>3. ColorPicker
Color picker component with hex code input and preview.
Pick a primary color for the theme.
Import
import { ColorPicker } from "@/components/ui/ColorPicker/ColorPicker";Usage
<ColorPicker
label="Primary Color"
helperText="Pick a primary color for the theme."
name="primaryColor"
id="primaryColor"
placeholder="#FFFFFF"
/>4. File Item
Displays an uploaded file with thumbnail, file details, upload progress, success, and error states with remove and retry actions.
📄
project-brochure.pdf2.4 MB
65%
Import
import FileItem from "@/components/ui/FileItem/FileItem";Usage
<FileItem
fileName="project-brochure.pdf"
fileSize="2.4 MB"
previewUrl="https://picsum.photos/100/100"
status="uploading"
progress={65}
onRemove={() => {}}
onRetry={() => {}}
// errorMessage="Upload failed"
/>5. Location Selector
Expandable location selector with grouped sections, grid options, and searchable input fields for selecting locations.
Select Location
Popular Cities
Search Location
Import
import { LocationSelector } from "@/components/ui/LocationSelector/LocationSelector";Usage
<LocationSelector
placeholder="Select Location"
data={[
{
title: "Popular Cities",
type: "grid",
options: [
"Mumbai",
"Pune",
"Bengaluru",
"Hyderabad",
"Delhi",
"Chennai",
],
},
{
title: "Search Location",
type: "input",
placeholder: "Search city or locality",
},
]}
/>6. Live Location
Interactive Google Maps location picker with live geolocation detection, draggable marker, reverse geocoding, and address preview.
Detected Address
Shivajinagar, Pune, Maharashtra, India
Initializing Maps Widget...
Import
import LiveLocation from "@/components/ui/LiveLocation";Usage
<LiveLocation
latitude={18.5204}
longitude={73.8567}
address="Shivajinagar, Pune, Maharashtra, India"
height="320px"
onChange={(location) => console.log(location)}
// error=""
/>