Form Fields

Specialized input variants — number stepper, search, phone, password toggle, and URL prefix. Built on top of the base Input atom.

Import

import {
  NumberInput,
  SearchInput,
  PhoneInput,
  PasswordInput,
  UrlInput,
} from "poyraz-ui/atoms";

Number Input

Stepper input with increment/decrement buttons and min/max constraints.

const [value, setValue] = useState(5);

<NumberInput
  value={value}
  onChange={setValue}
  min={0}
  max={100}
/>

Search Input

Input with a search icon prefix.

<SearchInput placeholder="Search components..." />

Phone Input

Input with a country code prefix.

+90
<PhoneInput countryCode="+90" placeholder="555 123 4567" />

Password Input

Input with a toggle button to show/hide password.

<PasswordInput placeholder="Enter password" />

URL Input

Input with an https:// prefix.

https://
<UrlInput placeholder="example.com" />