Input is a text field component that allows users to enter and edit text. It supports labels, captions, icons, and various states for validation feedback.
import { Input } from '@ui-kitten/components';
import React from 'react';
import { Input } from '@ui-kitten/components';
export const InputExample = () => {
const [value, setValue] = React.useState('');
return (
<Input
placeholder='Enter text'
value={value}
onChangeText={setValue}
/>
);
};
With Label and Caption
Inputs can display labels above and captions below the field.
<Input
label='Email'
placeholder='Enter your email'
caption='Should contain @ symbol'
value={email}
onChangeText={setEmail}
/>
<Input
status='success'
value={validInput}
onChangeText={setValidInput}
caption='Looks good!'
/>
<Input
status='danger'
value={invalidInput}
onChangeText={setInvalidInput}
caption='Invalid email format'
/>
<Input
status='warning'
value={warningInput}
onChangeText={setWarningInput}
caption='Email already in use'
/>
small, medium (default), and large.
<Input size='small' placeholder='Small input' />
<Input size='medium' placeholder='Medium input' />
<Input size='large' placeholder='Large input' />
Accessories
Add icons or custom components to the left or right of the input.
import { Input, Icon } from '@ui-kitten/components';
const EmailIcon = (props) => (
<Icon {...props} name='email' />
);
const EyeIcon = (props) => (
<Icon {...props} name='eye' />
);
export const InputWithAccessories = () => (
<>
<Input
placeholder='Email'
accessoryLeft={EmailIcon}
/>
<Input
placeholder='Password'
secureTextEntry
accessoryRight={EyeIcon}
/>
</>
);
<Input
placeholder='Disabled input'
disabled
value='Cannot edit'
/>
The value displayed in the input field.
Called when the text value changes.
Placeholder text displayed when the input is empty.
label
RenderProp<TextProps> | React.ReactText
String, number or a function component to render above the input field.
caption
RenderProp<TextProps> | React.ReactText
String, number or a function component to render below the input field. Useful for validation messages.
Status of the component. Can be basic, primary, success, info, warning, danger or control.
size
'small' | 'medium' | 'large'
default:"medium"
Size of the input field.
accessoryLeft
RenderProp<Partial<ImageProps>>
Function component to render at the start of the input. Expected to return an Image or Icon.
accessoryRight
RenderProp<Partial<ImageProps>>
Function component to render at the end of the input. Expected to return an Image or Icon.
Whether the input is disabled. Overrides the editable prop of TextInput.
Customizes the style of the text field.
Called when the input field receives focus.
Called when the input field loses focus.
Methods
Removes focus from the input field.
Returns whether the input field is currently focused.
Clears all text from the input field.
Form Examples
Login Form
import React from 'react';
import { Input, Button, Layout, Icon } from '@ui-kitten/components';
const LoginForm = () => {
const [email, setEmail] = React.useState('');
const [password, setPassword] = React.useState('');
const [secureTextEntry, setSecureTextEntry] = React.useState(true);
const EmailIcon = (props) => <Icon {...props} name='email' />;
const LockIcon = (props) => <Icon {...props} name='lock' />;
const EyeIcon = (props) => (
<Icon
{...props}
name={secureTextEntry ? 'eye-off' : 'eye'}
onPress={() => setSecureTextEntry(!secureTextEntry)}
/>
);
return (
<Layout style={{ padding: 16, gap: 16 }}>
<Input
label='Email'
placeholder='Enter your email'
value={email}
onChangeText={setEmail}
accessoryLeft={EmailIcon}
keyboardType='email-address'
autoCapitalize='none'
/>
<Input
label='Password'
placeholder='Enter your password'
value={password}
onChangeText={setPassword}
accessoryLeft={LockIcon}
accessoryRight={EyeIcon}
secureTextEntry={secureTextEntry}
/>
<Button>LOG IN</Button>
</Layout>
);
};
Validated Input
import React from 'react';
import { Input } from '@ui-kitten/components';
const ValidatedInput = () => {
const [email, setEmail] = React.useState('');
const [touched, setTouched] = React.useState(false);
const isValidEmail = (text) => {
return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(text);
};
const getStatus = () => {
if (!touched || !email) return 'basic';
return isValidEmail(email) ? 'success' : 'danger';
};
const getCaption = () => {
if (!touched || !email) return 'Enter your email address';
return isValidEmail(email)
? 'Email is valid'
: 'Please enter a valid email';
};
return (
<Input
label='Email'
placeholder='[email protected]'
value={email}
onChangeText={setEmail}
onBlur={() => setTouched(true)}
status={getStatus()}
caption={getCaption()}
/>
);
};
Search Input
import React from 'react';
import { Input, Icon } from '@ui-kitten/components';
const SearchInput = ({ onSearch }) => {
const [query, setQuery] = React.useState('');
const SearchIcon = (props) => <Icon {...props} name='search' />;
const CloseIcon = (props) => (
<Icon
{...props}
name='close'
onPress={() => setQuery('')}
/>
);
React.useEffect(() => {
const delaySearch = setTimeout(() => {
onSearch(query);
}, 300);
return () => clearTimeout(delaySearch);
}, [query]);
return (
<Input
placeholder='Search...'
value={query}
onChangeText={setQuery}
accessoryLeft={SearchIcon}
accessoryRight={query ? CloseIcon : undefined}
/>
);
};
