Form Fields

Specialized InputGroup compositions with one shared focus ring across editable input, icons, prefixes and actions.

Import

import {
  NumberInput,
  MaskedInput,
  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

Country prefix and customizable digit mask. # accepts digits, A letters and * alphanumeric characters.

+90
<PhoneInput countryCode="+90" mask="(###) ### ## ##" />

Password Input

Input with a toggle button to show/hide password.

<PasswordInput placeholder="Enter password" />

URL Input

Protocol-aware URL field strips duplicate protocol and whitespace while preserving the normalized value.

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

Custom Mask

Use MaskedInput for project-specific identifiers without adding a masking dependency.

<MaskedInput mask="AA-####-****" placeholder="TR-2026-A1B2" />
pnpm dlx shadcn@latest add @poyraz/form-fields

Runtime dependencies

lucide-react@^0.574.0

Registry dependencies

@poyraz/poyraz-utils, @poyraz/poyraz-theme, @poyraz/input, @poyraz/button

Installed files

@ui/atoms/form-fields.tsx