# useStateWithValidation

*Category:* Utilities
*Section:* UI state & input hooks
*Source:* https://uikit.developers.rio.cloud/#/utilities/useStateWithValidation
*Captured:* 2026-04-27T14:59:44.794Z

The useStateWithValidation hook allows to easily validate state. This comes in handy when validating form inputs.

## useStateWithValidation

### Example: Example 1

Username

#### React (tsx)

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

export default () => {
    const validationFn = (name: string) => name.length > 5;

    const [username, setUsername, isValid] = useStateWithValidation<string>(validationFn, '');

    const handleInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        setUsername(event.target.value);
    };

    const showError = username.length > 0 && !isValid;

    return (
        <div className='display-flex flex-column max-width-400'>
            <div className={`form-group ${showError ? 'has-error has-feedback' : ''}`}>
                <label htmlFor='inputUsername'>Username</label>
                <div className='form-control-feedback-wrapper'>
                    <input
                        id='inputUsername'
                        type='text'
                        className='form-control'
                        placeholder='Please enter your username'
                        value={username}
                        onChange={handleInputChange}
                    />
                    {showError && (
                        <>
                            <span className='form-control-feedback rioglyph rioglyph-error-sign' />
                            <span className='help-block'>
                                <span>Username is to short. Please enter at least 5 characters.</span>
                            </span>
                        </>
                    )}
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-flex flex-column max-width-400">
    <div class="form-group ">
        <label for="inputUsername">Username</label>
        <div class="form-control-feedback-wrapper">
            <input id="inputUsername" type="text" class="form-control" placeholder="Please enter your username" value="">
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| validationFn | Function | — | The validation function that gets invoked when the passed state changes. |
| initialValue | Any | — | The initial state value. |
| [state, onChange, isValid] | Array | — | Returns the actual "state", the "onChange" function that will be invoked when the state changes, and the "isValid" flag. |