TextField

Uncontrolled

Result

Loading...

Live Editor

<TextField label="Text field" defaultValue="100" />

<TextField label="Text field" defaultValue="100" />

Controlled

Result

Loading...

Live Editor

function Example() { const [value, setValue] = React.useState(''); return <TextField label="Text field" value={value} onChange={setValue} />; }

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>

<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>

<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>

<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" />

<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