Skip to content

Components · 19

Forms & inputs

Collecting and validating information. Fields stay calm while you type and only move to confirm or to point at a problem.

Text field

Labelled input with optional icon, help text and an end slot. 44px tall with a primary focus ring.

As it appears on the lease.

  • Border + ring 150ms
  • Message grows in 200ms
import { TextField } from "@/components/ui/text-field";

Floating label input

The label sits inside the field and floats up when you focus or type.

  • Label: move + scale to 78% 200ms ease-out
import { FloatingLabelInput } from "@/components/ui/text-field";

Password field

Show or hide the password, with a strength meter for new passwords.

Fair — mix upper and lower case

  • Eye icon swap: spring
  • Meter bars fill 300ms, 40ms apart
import { PasswordField } from "@/components/ui/password-field";

Search field

Filters as you type. The clear button appears once there is text; Escape clears.

  • Riverside Apartments
  • Brightwater Residency
  • Clear button pops in: spring
import { SearchField, Highlight } from "@/components/ui/search-field";

Textarea

Grows with its content and warns near the character limit.

Shown on the tenant portal.

62 / 160
  • Counter turns amber at 85%, red at the limit
import { Textarea } from "@/components/ui/textarea";

Select

Pick one option from a short list. ↑/↓ to move, Enter to choose, Escape to close.

Property type
  • List: scaleY + fade 200ms ease-out
  • Chevron flips
  • Tick pop: spring
import { Select } from "@/components/ui/select";

Combobox

Suggests cities while you type and highlights the matching letters.

  • Suggestions drop in 200ms
  • Rows stagger 25ms
import { Combobox } from "@/components/ui/combobox";

Checkbox

Independent choices, with a parent that shows a mixed state.

  • Tick draws itself 300ms
  • Box press 90%
import { Checkbox } from "@/components/ui/checkbox";

Radio group

One choice from a few options, as a list or as selectable cards.

Billing cycle
  • Dot: bouncy spring
  • Card tint 200ms
import { RadioGroup } from "@/components/ui/radio-group";

Switch

Turns a setting on or off immediately.

Charge the saved card on the 1st.
  • Thumb: snappy spring
  • Stretches while pressed
  • Track color 200ms
import { Switch } from "@/components/ui/switch";

Slider

Choose a value in a range. The value bubble follows the thumb.

₹32,000
₹5,000₹1,00,000
  • Bubble rises in: spring
  • Thumb grows to 125% while dragging
import { Slider } from "@/components/ui/slider";

Number stepper

Adjust a small count with buttons or the ↑/↓ keys.

Bedrooms
2
  • Digit rolls in the direction of change 300ms
import { NumberStepper } from "@/components/ui/number-stepper";

OTP input

Each box takes one digit; paste fills them all. The demo code is 1234.

Verification code

Enter the 4-digit code sent to ••• 4410

  • Digit bump: spring
  • Wrong code shakes 450ms
  • Right code turns green
import { OtpInput } from "@/components/ui/otp-input";

Tag input

Type and press Enter or comma to add. Backspace removes the last tag.

ParkingPet friendlyLift
  • Add: pop spring
  • Remove: shrink, others slide (layout)
import { TagInput } from "@/components/ui/tag-input";

File upload

Drop files or browse. Each file shows its progress, then a check.

Drop lease documents here

PDF, JPG or PNG up to 10 MB

    • Drag over: tint + 101.5% scale
    • Cloud floats
    • Rows rise 300ms
    import { Dropzone, UploadList } from "@/components/ui/file-upload";

    Date picker

    Pick a move-in date. Months slide in the direction you move.

    Move-in date
    • Popover 200ms
    • Month slide 300ms
    • Chosen day pops
    import { DatePicker } from "@/components/ui/date-picker";

    Rating

    Rate a stay or a service. Stars preview on hover and pop in sequence when chosen.

    Rate your stay
    Not rated
    • Preview fill 150ms
    • Pop: spring, 45ms apart
    import { Rating } from "@/components/ui/rating";

    Chip group

    Toggle filters on and off. Selected chips show a check.

    Filter units
    • Check grows in 200ms
    • Tint 200ms
    • Tap 96%
    import { Chip, ChipGroup } from "@/components/ui/chip";

    Validation

    Errors appear under the field with a clear fix. Submit empty, then with an email.

    • Invalid: shake 450ms
    • Message grows in 200ms
    <TextField error={error} success={success} … />