# FadeExpander

*Category:* Components
*Section:* Show/Hide
*Source:* https://uikit.developers.rio.cloud/#/components/fadeExpander
*Captured:* 2026-04-27T14:57:28.551Z

The FadeExpander component fades in and expands when the content.

## FadeExpander

### Example:

Lorem ipsum dolor sit amet

Enable lorem ipsum dolor sit amet

#### React (tsx)

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

import FadeExpander from '@rio-cloud/rio-uikit/FadeExpander';
import Switch from '@rio-cloud/rio-uikit/Switch';

export default () => {
    const [showContent1, setShowContent1] = useState(false);
    const [showContent2, setShowContent2] = useState(false);

    const [isSwitch1Toggled, setIsSwitch1Toggled] = useState(false);

    const input1Ref = useRef<HTMLInputElement>(null);
    const input2Ref = useRef<HTMLInputElement>(null);

    const locationBlock = (
        <div className='position-relative bg-white border border-top-none rounded rounded-bottom margin-top-0 padding-x-10 padding-y-15'>
            <div className='display-flex cursor-pointer align-items-center gap-15 padding-x-5'>
                <div className='display-grid place-items-center height-40 width-40 rounded-circle bg-primary text-color-white'>
                    <span className='rioglyph rioglyph-location-arrow text-size-20' />
                </div>
                <div className=''>
                    <div className='text-medium text-size-16 text-color-primary'>Allow location access</div>
                    <div className='text-size-12 text-color-darker'>Based on sources like your browser</div>
                </div>
            </div>
        </div>
    );

    return (
        <div className='max-width-500 border rounded display-flex flex-column shadow-default bg-white'>
            <div className='padding-15 text-medium shadow-muted-down z-index-10'>Lorem ipsum dolor sit amet</div>
            <div className=''>
                <div className='bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20'>
                    <div className='form-group'>
                        <div className='input-group shadow-subtle'>
                            <span className='input-group-addon'>
                                <span className='rioglyph rioglyph-start' />
                            </span>
                            <input
                                className='form-control'
                                placeholder='Add starting point'
                                ref={input1Ref}
                                onFocus={() => setShowContent1(true)}
                                onBlur={() => setShowContent1(false)}
                            />
                        </div>
                        <FadeExpander show={showContent1}>{locationBlock}</FadeExpander>
                    </div>
                    <div className='form-group margin-0'>
                        <div className='input-group shadow-subtle'>
                            <span className='input-group-addon'>
                                <span className='rioglyph rioglyph-finish' />
                            </span>
                            <input
                                className='form-control'
                                placeholder='Add destination'
                                ref={input2Ref}
                                onFocus={() => setShowContent2(true)}
                                onBlur={() => setShowContent2(false)}
                            />
                        </div>
                        <FadeExpander show={showContent2}>{locationBlock}</FadeExpander>
                    </div>
                </div>
                <div className='padding-15 border border-top-only border-color-lighter'>
                    <div className='display-flex justify-content-between'>
                        <div className='text-color-darker'>Enable lorem ipsum dolor sit amet</div>
                        <div className='text-color-dark'>
                            <Switch
                                onChange={() => setIsSwitch1Toggled(!isSwitch1Toggled)}
                                checked={isSwitch1Toggled}
                            />
                        </div>
                    </div>
                    <FadeExpander show={isSwitch1Toggled} className='margin-top-15'>
                        <div className='bg-lightest padding-15 rounded rounded-large text-color-dark'>
                            <div className='text-size-h5 text-color-darker margin-bottom-10'>Settings</div>
                            <div className='display-grid grid-cols-2 gap-10'>
                                <div className='form-group margin-0'>
                                    <label className='form-label' htmlFor='subgrid-username'>
                                        Lorem ipsum
                                    </label>
                                    <input id='subgrid-username' type='text' className='form-control' />
                                </div>
                                <div className='form-group margin-0'>
                                    <label className='form-label' htmlFor='subgrid-password'>
                                        Dolor sit amet
                                    </label>
                                    <input id='subgrid-password' type='password' className='form-control' />
                                </div>
                            </div>
                        </div>
                    </FadeExpander>
                </div>
            </div>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="max-width-500 border rounded display-flex flex-column shadow-default bg-white">
    <div class="padding-15 text-medium shadow-muted-down z-index-10">Lorem ipsum dolor sit amet</div>
    <div class="">
        <div class="bg-lightest border border-top-only border-color-lighter padding-x-15 padding-y-20">
            <div class="form-group">
                <div class="input-group shadow-subtle">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-start">
                        </span>
                    </span>
                    <input class="form-control" placeholder="Add starting point">
                </div>
            </div>
            <div class="form-group margin-0">
                <div class="input-group shadow-subtle">
                    <span class="input-group-addon">
                        <span class="rioglyph rioglyph-finish">
                        </span>
                    </span>
                    <input class="form-control" placeholder="Add destination">
                </div>
            </div>
        </div>
        <div class="padding-15 border border-top-only border-color-lighter">
            <div class="display-flex justify-content-between">
                <div class="text-color-darker">Enable lorem ipsum dolor sit amet</div>
                <div class="text-color-dark">
                    <div class="uikit-switch">
                        <label class="switch-label uikit-switch">
                            <input type="checkbox" class="switch-input">
                            <div class="switch-content" style="color: var(--brand-primary); min-width: 40px;">
                                <div class="switch-handle">
                                </div>
                            </div>
                        </label>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
```

#### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| show | boolean | false | Defines if the content is shown or not. |
| duration | number | 0.2 | Allows customization of animation duration. |
| delay | number | 0 | Delay in seconds before starting the animation. |
| className | string | — | Additional classes set to the wrapper element. |