# ClearableInput

*Category:* Components
*Section:* Interaction
*Source:* https://uikit.developers.rio.cloud/#/components/clearableInput
*Captured:* 2026-04-27T14:57:17.873Z

Control, which can be cleared when it has a value.

## ClearableInput

Can be used as either a controlled or uncontrolled component, depending on your use case. https://facebook.github.io/react/docs/uncontrolled-components.html

### Example: Example 1

Default

With a default value

With a button addon

With many button addons

With addons Button

With addons on both sides

KM

With type password

With type email

With limited amount of characters

Small input

Large input

KM

With feedback
Disabled input

#### React (tsx)

```tsx
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';

export default () => (
    <div className='max-width-600'>
        <div className='form-group'>
            <label htmlFor='1'>Default</label>
            <ClearableInput id='1' />
        </div>

        <div className='form-group'>
            <label htmlFor='2'>With a default value</label>
            <ClearableInput id='2' defaultValue='Matti' />
        </div>

        <div className='form-group'>
            <label htmlFor='3'>With a button addon</label>
            <div className='input-group'>
                <ClearableInput id='3' placeholder='Type in here' />
                <span className='input-group-btn'>
                    <button className='btn btn-primary btn-icon-only' type='button'>
                        <span className='rioglyph rioglyph-search' />
                    </button>
                </span>
            </div>
        </div>

        <div className='form-group'>
            <label htmlFor='4'>With many button addons</label>
            <div className='input-group'>
                <ClearableInput id='4' defaultValue='Clear me' onChange={(value: string) => console.log(value)} />
                <span className='input-group-btn'>
                    <button className='btn btn-default btn-icon-only' type='button'>
                        <span className='rioglyph rioglyph-chat' />
                    </button>
                    <button className='btn btn-primary btn-icon-only' type='button'>
                        <span className='rioglyph rioglyph-send' />
                    </button>
                </span>
            </div>
        </div>

        <div className='form-group'>
            <label htmlFor='5'>With addons</label>
            <div className='input-group'>
                <span className='input-group-addon'>
                    <span className='rioglyph rioglyph-search' aria-hidden='true' />
                </span>
                <ClearableInput id='5' placeholder='Search by name' onChange={(value: string) => console.log(value)} />
                <span className='input-group-btn'>
                    <button className='btn btn-primary' type='button'>
                        Button
                    </button>
                </span>
            </div>
        </div>

        <div className='form-group'>
            <label htmlFor='6'>With addons on both sides</label>
            <div className='input-group'>
                <div className='input-group-addon'>
                    <span className='rioglyph rioglyph-finish' aria-hidden='true' />
                </div>
                <ClearableInput id='6' defaultValue='234' onChange={(value: string) => console.log(value)} />
                <div className='input-group-addon'>KM</div>
            </div>
        </div>

        <div className='form-group'>
            <label htmlFor='7'>With type password</label>
            <ClearableInput id='1' defaultValue='Matti' type='password' />
        </div>

        <div className='form-group'>
            <label htmlFor='8'>With type email</label>
            <ClearableInput id='8' defaultValue='test@test.de' type='email' />
        </div>

        <div className='form-group'>
            <label htmlFor='9'>With limited amount of characters</label>
            <ClearableInput id='9' defaultValue='Limited to 20 chars' maxLength={20} />
        </div>

        <div className='form-group'>
            <label htmlFor='10'>Small input</label>
            <ClearableInput id='10' defaultValue='Matti' inputClassName='input-sm' />
        </div>

        <div className='form-group form-group-lg'>
            <label htmlFor='11'>Large input</label>
            <div className='input-group'>
                <div className='input-group-addon'>
                    <span className='rioglyph rioglyph-finish' aria-hidden='true' />
                </div>
                <ClearableInput id='11' defaultValue='234' onChange={(value: string) => console.log(value)} />
                <div className='input-group-addon'>KM</div>
            </div>
        </div>

        <div className='form-group has-error has-feedback'>
            <label htmlFor='12'>With feedback</label>
            <ClearableInput id='12' defaultValue='Some wrong value' />
            <span className='form-control-feedback rioglyph rioglyph-error-sign' aria-hidden='true' />
        </div>

        <div className='form-group'>
            <label htmlFor='1'>Disabled input</label>
            <ClearableInput id='13' defaultValue='This input is disabled' disabled />
        </div>
    </div>
);
```

#### HTML (html)

```html
<div class="max-width-600">
    <div class="form-group">
        <label for="1">Default</label>
        <div class="ClearableInput input-group">
            <input id="1" class="form-control" type="text" tabindex="0" value="">
            <span class="clearButton hide">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="2">With a default value</label>
        <div class="ClearableInput input-group">
            <input id="2" class="form-control withClearButton" type="text" tabindex="0" value="Matti">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="3">With a button addon</label>
        <div class="input-group">
            <div class="ClearableInput input-group">
                <input id="3" placeholder="Type in here" class="form-control" type="text" tabindex="0" value="">
                <span class="clearButton hide">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
            <span class="input-group-btn">
                <button class="btn btn-primary btn-icon-only" type="button">
                    <span class="rioglyph rioglyph-search">
                    </span>
                </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="4">With many button addons</label>
        <div class="input-group">
            <div class="ClearableInput input-group">
                <input id="4" class="form-control withClearButton" type="text" tabindex="0" value="Clear me">
                <span class="clearButton">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
            <span class="input-group-btn">
                <button class="btn btn-default btn-icon-only" type="button">
                    <span class="rioglyph rioglyph-chat">
                    </span>
                </button>
                <button class="btn btn-primary btn-icon-only" type="button">
                    <span class="rioglyph rioglyph-send">
                    </span>
                </button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="5">With addons</label>
        <div class="input-group">
            <span class="input-group-addon">
                <span class="rioglyph rioglyph-search" aria-hidden="true">
                </span>
            </span>
            <div class="ClearableInput input-group">
                <input id="5" placeholder="Search by name" class="form-control" type="text" tabindex="0" value="">
                <span class="clearButton hide">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
            <span class="input-group-btn">
                <button class="btn btn-primary" type="button">Button</button>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="6">With addons on both sides</label>
        <div class="input-group">
            <div class="input-group-addon">
                <span class="rioglyph rioglyph-finish" aria-hidden="true">
                </span>
            </div>
            <div class="ClearableInput input-group">
                <input id="6" class="form-control withClearButton" type="text" tabindex="0" value="234">
                <span class="clearButton">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
            <div class="input-group-addon">KM</div>
        </div>
    </div>
    <div class="form-group">
        <label for="7">With type password</label>
        <div class="ClearableInput input-group">
            <input id="1" class="form-control withClearButton" type="password" tabindex="0" value="Matti">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="8">With type email</label>
        <div class="ClearableInput input-group">
            <input id="8" class="form-control withClearButton" type="email" tabindex="0" value="test@test.de">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="9">With limited amount of characters</label>
        <div class="ClearableInput input-group">
            <input id="9" class="form-control withClearButton" type="text" maxlength="20" tabindex="0" value="Limited to 20 chars">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="10">Small input</label>
        <div class="ClearableInput input-group">
            <input id="10" class="form-control input-sm withClearButton" type="text" tabindex="0" value="Matti">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group form-group-lg">
        <label for="11">Large input</label>
        <div class="input-group">
            <div class="input-group-addon">
                <span class="rioglyph rioglyph-finish" aria-hidden="true">
                </span>
            </div>
            <div class="ClearableInput input-group">
                <input id="11" class="form-control withClearButton" type="text" tabindex="0" value="234">
                <span class="clearButton">
                    <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                    </span>
                </span>
            </div>
            <div class="input-group-addon">KM</div>
        </div>
    </div>
    <div class="form-group has-error has-feedback">
        <label for="12">With feedback</label>
        <div class="ClearableInput input-group">
            <input id="12" class="form-control withClearButton" type="text" tabindex="0" value="Some wrong value">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
        <span class="form-control-feedback rioglyph rioglyph-error-sign" aria-hidden="true">
        </span>
    </div>
    <div class="form-group">
        <label for="1">Disabled input</label>
        <div class="ClearableInput input-group pointer-events-none">
            <input id="13" class="form-control withClearButton disabled" type="text" disabled="" tabindex="0" value="This input is disabled">
            <span class="clearButton">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
</div>
```

#### Props (json)

```json
'-- ### ### ###' or '+49 00 000 00'
```

### Example: Example 2

Controlled example Set random value

#### React (tsx)

```tsx
import { useState } from 'react';

import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';
import Notification from '@rio-cloud/rio-uikit/Notification';
import { generateDummyText } from '../../../utils/data';

const ClearableInputControlled = () => {
    const [inputValue, setInputValue] = useState('');

    const handleSetRandomValue = () => setInputValue(generateDummyText());

    const handleInputChange = (newValue: string) => {
        setInputValue(newValue);
        if (newValue) {
            Notification.info(newValue);
        }
    };

    const handleClear = (event: React.MouseEvent<HTMLSpanElement>) => {
        const target = event.target as HTMLSpanElement;
        Notification.info('Input cleared');
    };

    const handleKeyPress = (event: React.KeyboardEvent<unknown>) => {
        console.log(event.key);
    };

    const handleBlur = (_event: React.FocusEvent<HTMLInputElement>) => {
        Notification.info('Input lost focus');
    };

    return (
        <div className='max-width-600 form-group'>
            <label htmlFor='controlledInput'>Controlled example</label>
            <ClearableInput
                id='controlledInput'
                value={inputValue}
                onChange={handleInputChange}
                onClear={handleClear}
                onKeyPress={handleKeyPress}
                onBlur={handleBlur}
            />
            <br />
            <button type='button' className='btn btn-primary' onClick={handleSetRandomValue}>
                Set random value
            </button>
        </div>
    );
};

export default ClearableInputControlled;
```

#### HTML (html)

```html
<div class="max-width-600 form-group">
    <label for="controlledInput">Controlled example</label>
    <div class="ClearableInput input-group">
        <input id="controlledInput" class="form-control" type="text" tabindex="0" value="">
        <span class="clearButton hide">
            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
            </span>
        </span>
    </div>
    <br>
    <button type="button" class="btn btn-primary">Set random value</button>
</div>
```

#### Props (json)

```json
'-- ### ### ###' or '+49 00 000 00'
```

### Example: Example 3

Controlled component with restriction and used with custom input

#### React (tsx)

```tsx
import { useState, useRef, useEffect } from 'react';
import { isNil, toNumber } from 'es-toolkit/compat';

import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';

const ClearableInputControlledRestricted = () => {
    const [value, setValue] = useState('');
    const [showError, setShowError] = useState(false);

    const inputRef = useRef<HTMLInputElement>(null);

    useEffect(() => console.log({ ref: inputRef.current }), [inputRef.current]);

    const handleInputChange = (newValue: string) => {
        const convertedValue = toNumber(newValue);
        const isValid = !Number.isNaN(convertedValue);

        setValue(isValid ? newValue : value);
        setShowError(!isNil(newValue) && !isValid);
    };

    return (
        <div className={`max-width-600 form-group ${showError ? 'has-error has-feedback' : ''}`}>
            <label htmlFor='uncontrolledInput'>Controlled component with restriction and used with custom input</label>
            <ClearableInput
                id='uncontrolledInput'
                ref={inputRef}
                value={value}
                onChange={handleInputChange}
                onKeyPress={event => console.log(event)}
                placeholder='Please enter a number'
            >
                {inputProps => <input {...(inputProps as React.InputHTMLAttributes<HTMLInputElement>)} />}
            </ClearableInput>
            {showError && <span className='form-control-feedback rioglyph rioglyph-error-sign' />}
            {showError && (
                <span className='help-block'>
                    <span>Only Number is allowed</span>
                </span>
            )}
        </div>
    );
};

export default ClearableInputControlledRestricted;
```

#### HTML (html)

```html
<div class="max-width-600 form-group ">
    <label for="uncontrolledInput">Controlled component with restriction and used with custom input</label>
    <div class="ClearableInput input-group">
        <input id="uncontrolledInput" placeholder="Please enter a number" class="form-control" type="text" tabindex="0" value="">
        <span class="clearButton hide">
            <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
            </span>
        </span>
    </div>
</div>
```

#### Props (json)

```json
'-- ### ### ###' or '+49 00 000 00'
```

## ClearableInput with input mask

### Example: Example 4

Input with input mask

Input with input mask that reveals itself on focus

Input with input mask that is never shown

Input with custom mask definition

Input with Date mask

#### React (tsx)

```tsx
import ClearableInput from '@rio-cloud/rio-uikit/ClearableInput';

export default () => {
    return (
        <div className='display-flex flex-wrap column-gap-50'>
            <div className='form-group'>
                <label htmlFor='inputWithMask1'>Input with input mask</label>
                <ClearableInput id='inputWithMask1' mask='+49 00 000 00' className='min-width-300' />
            </div>

            <div className='form-group'>
                <label htmlFor='inputWithMask2'>Input with input mask that reveals itself on focus</label>
                <ClearableInput
                    id='inputWithMask2'
                    mask='-- *** *** ***'
                    maskVisibility='onFocus'
                    className='min-width-300'
                />
            </div>

            <div className='form-group'>
                <label htmlFor='inputWithMask3'>Input with input mask that is never shown</label>
                <ClearableInput
                    id='inputWithMask3'
                    mask='** *** *** ***'
                    maskVisibility='never'
                    className='min-width-300'
                />
            </div>

            <div className='form-group'>
                <label htmlFor='inputWithMask4'>Input with custom mask definition</label>
                <ClearableInput
                    id='inputWithMask4'
                    mask='AA.AAA-AAAA' // is equivalent to /^[A-Z0-9]{2}[.]{1}[A-Z0-9]{3}[-]{1}[A-Z0-9]{4}/
                    maskDefinitions={{
                        A: /[A-Z0-9]/,
                    }}
                    className='min-width-300'
                    maskPlaceholder='_'
                    maskVisibility='always'
                />
            </div>

            <div className='form-group'>
                <label htmlFor='inputWithMask5'>Input with Date mask</label>
                <ClearableInput
                    id='inputWithMask5'
                    mask={Date}
                    min={new Date(1990, 0, 1)}
                    max={new Date(2020, 0, 1)}
                    className='min-width-300'
                />
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-wrap column-gap-50">
    <div class="form-group">
        <label for="inputWithMask1">Input with input mask</label>
        <div class="ClearableInput input-group min-width-300">
            <input id="inputWithMask1" class="form-control withInputMask" type="text" tabindex="0" value="">
            <span class="clearButton hide">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputWithMask2">Input with input mask that reveals itself on focus</label>
        <div class="ClearableInput input-group min-width-300">
            <input id="inputWithMask2" class="form-control withInputMask" type="text" tabindex="0" value="">
            <span class="clearButton hide">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputWithMask3">Input with input mask that is never shown</label>
        <div class="ClearableInput input-group min-width-300">
            <input id="inputWithMask3" class="form-control withInputMask" type="text" tabindex="0" value="">
            <span class="clearButton hide">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputWithMask4">Input with custom mask definition</label>
        <div class="ClearableInput input-group min-width-300">
            <input id="inputWithMask4" class="form-control withInputMask" type="text" tabindex="0" value="">
            <span class="clearButton hide">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
    <div class="form-group">
        <label for="inputWithMask5">Input with Date mask</label>
        <div class="ClearableInput input-group min-width-300">
            <input id="inputWithMask5" class="form-control withInputMask" type="text" tabindex="0" value="">
            <span class="clearButton hide">
                <span class="clearButtonIcon rioglyph rioglyph-remove-sign">
                </span>
            </span>
        </div>
    </div>
</div>
```

#### Props (json)

```json
'-- ### ### ###' or '+49 00 000 00'
```