Skip to main content

TextField

Uncontrolled​

Result
Loading...
Live Editor
<TextField label="Text field" defaultValue="100" />

Password​

Result
Loading...
Live Editor
<TextField label="Text field" defaultValue="Awesome Password" type="password" />

Controlled​

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

	return <TextField label="Text field" value={value} onChange={setValue} />;
}

With mask​

Result
Loading...
Live Editor
<div style={{ display: 'grid', gridGap: '1rem' }}>
	<TextField label="Phone Number" mask="phone" />
	<TextField label="Social Security Number" mask="ssn" />
	<TextField label="Date" mask="date" />
	<TextField label="Custom numeric" mask="$9.99" />
	<TextField label="Custom alphanumeric" mask="aaa $9.99" defaultValue="USD $1.50" />
</div>

With prefix and suffix​

Result
Loading...
Live Editor
<div style={{ display: 'grid', gridGap: '1rem' }}>
	<TextField label="Prefix" renderPrefix={() => <span className="icon-search-refraction" />} />

	<TextField label="Suffix" renderSuffix={() => <span className="icon-help-circle" />} />

	<TextField label="Clear button" renderSuffix={() => <Input.ClearButton />} />
</div>

With custom add-ons​

Result
Loading...
Live Editor
<div style={{ display: 'grid', gridGap: '1rem' }}>
	<TextField
		label="Handle"
		renderStartAddOn={() => (
			<InputGroup.Text>
				<span className="icon-at-sign" />
			</InputGroup.Text>
		)}
	/>

	<TextField
		label="End Add-on"
		renderEndAddOn={() => (
			<InputGroup.Text>
				<span className="icon-settings-01" />
			</InputGroup.Text>
		)}
	/>

	<TextField
		label="Button Add-on"
		renderStartAddOn={() => (
			<DropdownButton variant="outline-secondary" title="Currency">
				<DropdownItem>USD</DropdownItem>
				<DropdownItem>EUR</DropdownItem>
				<DropdownItem>GBP</DropdownItem>
			</DropdownButton>
		)}
	/>
</div>

As textarea​

Result
Loading...
Live Editor
<TextField label="Text area" rows={5} as="textarea" />

Analytics​

The TextField component is trackable through Kyber Analytics. This is the default analytics config.

export default {
	value: 'TextField',
	actions: {
		onClick: { type: 'TEXTFIELD_CLICK', payload: 'Click' },
		onChange: { type: 'TEXTFIELD_CHANGE', payload: 'Change' },
	},
};

Props​