Input
Input provides a styled text field with labels, validation states, and helper text.
Source
LLM docs
Package
Examples
6
Properties
96
Playground
Basics
Basic text input with label, placeholder, and value handling.
Loading demo…
import { useState } from 'react';
import { Input } from '@plocks/ui';
export function Demo() {
const [value, setValue] = useState('');
return (
<Input
label="Full name"
placeholder="Enter your full name"
value={value}
onChangeText={setValue}
/>
);
}Variants
Four visual variants for the input shell:
default, filled, outline, and unstyled. The variant only changes the container fill and border — label, sections, and disclaimer stay consistent.Loading demo…
import { Block, Input } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Input variant="default" label="Default" placeholder="user@example.com" />
<Input variant="filled" label="Filled" placeholder="user@example.com" />
<Input variant="outline" label="Outline" placeholder="user@example.com" />
<Input variant="unstyled" placeholder="Unstyled — type to edit inline" />
</Block>
);
}Types
Set
type to switch the keyboard and browser behaviour — email, password, number, and tel are all supported.Loading demo…
import { Block, Input } from '@plocks/ui';
export function Demo() {
return (
<Block fullWidth>
<Input type="email" label="Email address" placeholder="user@example.com" />
<Input type="password" label="Password" placeholder="Enter your password" />
<Input type="number" label="Age" placeholder="Enter your age" />
<Input type="tel" label="Phone number" placeholder="+1 (555) 123-4567" />
</Block>
);
}Validation
Pass
error to show a validation message, required to mark the field, and helperText for guidance. disabled blocks editing.Loading demo…
import { useState } from 'react';
import { Block, Input } from '@plocks/ui';
const isValidEmail = (email: string) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
export function Demo() {
const [email, setEmail] = useState('');
return (
<Block fullWidth>
<Input
type="email"
label="Email address"
placeholder="user@example.com"
value={email}
onChangeText={setEmail}
required
error={email.length > 0 && !isValidEmail(email) ? 'Please enter a valid email address' : undefined}
helperText="We'll never share your email"
/>
<Input label="Disabled" value="Cannot edit this value" disabled />
</Block>
);
}Multiline Modes
Pair
multiline with minLines/maxLines to auto-expand, or with numberOfLines for a fixed height.Loading demo…
import { useState } from 'react';
import { Block, Input } from '@plocks/ui';
export function Demo() {
const [autoText, setAutoText] = useState('');
const [fixedText, setFixedText] = useState('');
return (
<Block fullWidth>
<Input
label="Auto-expanding"
placeholder="Start typing — press Enter to add lines"
value={autoText}
onChangeText={setAutoText}
multiline
minLines={1}
maxLines={5}
helperText="Grows from 1 to 5 lines, then scrolls"
/>
<Input
label="Fixed height"
placeholder="Always 3 lines tall"
value={fixedText}
onChangeText={setFixedText}
multiline
numberOfLines={3}
/>
</Block>
);
}Sections and slot styling
Render content inside the field with
startSection / endSection, and add clearable for a dismiss button. startSectionProps and endSectionProps accept any <View> props (including style) and apply them to the slot wrapper; placeholderTextColor overrides the muted default.Loading demo…
import { useState } from 'react';
import { Block, Icon, Input, Text } from '@plocks/ui';
export function Demo() {
const [workspace, setWorkspace] = useState('');
const [search, setSearch] = useState('');
return (
<Block fullWidth>
<Input
label="URL"
placeholder="my-workspace"
value={workspace}
onChangeText={setWorkspace}
startSection={<Text ff="monospace" c="muted">https://</Text>}
startSectionProps={{ style: { paddingRight: 8 } }}
/>
<Input
label="Search"
placeholder="Find anything…"
value={search}
onChangeText={setSearch}
clearable
placeholderTextColor="#a855f7"
startSection={<Icon name="search" size={16} />}
startSectionProps={{ style: { paddingRight: 8 } }}
/>
</Block>
);
}React Native design for iOS, Android, and Web.
Quick Links
Resources