Input

Result

Loading...

Live Editor

<Input placeholder="Default" />

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

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

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> </> )} /> </>

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

<>
    <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('')} /> )} /> ); }

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

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