Skip to main content

Input

Result
Loading...
Live Editor
<Input placeholder="Default" />

Size​

Result
Loading...
Live Editor
<>
	<Input size="xs" placeholder="Extra Small" className="mb-3" />
	<Input size="sm" placeholder="Small" className="mb-3" />
	<Input size="md" placeholder="Medium" className="mb-3" />
	<Input size="lg" placeholder="Large" className="mb-3" />
	<Input size="xl" placeholder="Extra Large" className="mb-3" />
	<Input size="xxl" placeholder="Extra Extra Large" />
</>

Prefix and Suffix​

Result
Loading...
Live Editor
<>
	<Input
		placeholder="Icons"
		className="mb-3"
		renderPrefix={() => <span className="icon-user-01" />}
		renderSuffix={() => <span className="icon-alert-circle" />}
	/>
	<Input
		placeholder="Text"
		className="mb-3"
		renderPrefix={() => 'Prefix'}
		renderSuffix={() => 'Suffix'}
	/>
	<Input
		placeholder="Text and Icons"
		className="mb-3"
		renderPrefix={() => (
			<>
				<span className="icon-user-01 me-3" />
				<span>Prefix</span>
			</>
		)}
		renderSuffix={() => (
			<>
				<span className="icon-alert-circle me-3" />
				<span>Suffix</span>
			</>
		)}
	/>
</>

Start and End Addons​

Result
Loading...
Live Editor
<>
	<div className="mb-3">
		<Input
			placeholder="Buttons"
			renderStartAddOn={() => <Button variant="outline-secondary">Start</Button>}
			renderEndAddOn={() => <Button variant="outline-secondary">End</Button>}
		/>
	</div>
	<div className="mb-3">
		<Input
			placeholder="Text"
			renderStartAddOn={() => <InputGroup.Text>Start</InputGroup.Text>}
			renderEndAddOn={() => <InputGroup.Text>End</InputGroup.Text>}
		/>
	</div>
	<div className="mb-3">
		<Input
			placeholder="Icons"
			renderStartAddOn={() => (
				<InputGroup.Text>
					<span className="icon-user-01" />
				</InputGroup.Text>
			)}
			renderEndAddOn={() => (
				<InputGroup.Text>
					<span className="icon-alert-circle" />
				</InputGroup.Text>
			)}
		/>
	</div>
	<div className="mb-3">
		<Input
			placeholder="Icons, Text, and Buttons"
			renderStartAddOn={() => (
				<>
					<InputGroup.Text>
						<span className="icon-user-01" />
					</InputGroup.Text>
					<InputGroup.Text>Start</InputGroup.Text>
					<Button variant="outline-secondary">Start</Button>
				</>
			)}
			renderEndAddOn={() => (
				<>
					<Button variant="outline-secondary">End</Button>
					<InputGroup.Text>End</InputGroup.Text>
					<InputGroup.Text>
						<span className="icon-alert-circle" />
					</InputGroup.Text>
				</>
			)}
		/>
	</div>
</>

With Clear Button​

Text​

Result
Loading...
Live Editor
function ClearableInput() {
	const [value, setValue] = React.useState('');

	return (
		<Input
			placeholder="Clearable"
			value={value}
			onChange={(e) => setValue(e.target.value)}
			renderSuffix={() => (
				<Input.ClearButton
					aria-label="Clear input"
					visible={value.length > 0}
					onClick={() => setValue('')}
				/>
			)}
		/>
	);
}

Valid, Warning, Edited, and Invalid​

Result
Loading...
Live Editor
<>
	<div className="mb-3">
		<Input placeholder="Valid" isValid validText="Valid text" />
	</div>
	<div className="mb-3">
		<Input placeholder="Warning" isWarning warningText="Warning text" />
	</div>
	<div className="mb-3">
		<Input placeholder="Edited" isEdited editedText="Edited text" />
	</div>
	<div className="mb-3">
		<Input placeholder="Invalid" errorText="Error text" isInvalid />
	</div>
</>

Props​

Input​

InputClearButton​