# Form toggle

*Category:* Templates
*Section:* Forms
*Source:* https://uikit.developers.rio.cloud/#/templates/form-toggle
*Captured:* 2026-04-27T14:59:24.160Z

## Form toggle

### Example: Example 1

Size by form-group
Note
Different form-group sizes come with different bottom spacing

Wrapped by sized form-groups
form-group-sm + form-group-not-editable Lorem Ipsum Dolor

form-group + form-group-not-editable Lorem Ipsum Dolor

form-group-lg + form-group-not-editable Lorem Ipsum Dolor

Edit

Size by input-group
Note
No form-group size results in the same bottom spacing

Wrapped only by form-group
input-group-sm input-group-not-editable Lorem Ipsum Dolor

input-group input-group-not-editable Lorem Ipsum Dolor

input-group-lg input-group-not-editable Lorem Ipsum Dolor

Edit

#### React (tsx)

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

import { Note } from '../../../components/Note';

import Button from '@rio-cloud/rio-uikit/Button';
import Card from '@rio-cloud/rio-uikit/Card';
import FormLabel from '@rio-cloud/rio-uikit/FormLabel';

type FormGroupProps = {
    size?: 'sm' | 'lg';
    value: string;
    editMode: boolean;
    onChange: VoidFunction;
};

const FormGroup = ({ size, value, editMode, onChange }: FormGroupProps) => (
    <div className={`form-group ${size ? `form-group-${size}` : ''} ${!editMode ? 'form-group-not-editable' : ''}`}>
        <FormLabel htmlFor='input1'>{`form-group${size ? `-${size}` : ''} ${
            !editMode ? '+ form-group-not-editable' : ''
        }`}</FormLabel>
        {editMode ? (
            <div className='input-group'>
                <input id='input1' className='form-control' type='text' defaultValue={value} onChange={onChange} />
                <span className='input-group-btn'>
                    <Button
                        iconOnly
                        iconName='rioglyph-trash'
                        bsSize={size}
                        className={!editMode ? 'form-group-not-editable' : ''}
                    />
                </span>
            </div>
        ) : (
            <div>{value}</div>
        )}
    </div>
);

type InputGroupProps = {
    size?: 'sm' | 'lg';
    value: string;
    editMode: boolean;
    onChange: VoidFunction;
};

const InputGroup = ({ size, value, editMode, onChange }: InputGroupProps) => (
    <>
        <FormLabel htmlFor='input2'>{`input-group${size ? `-${size}` : ''} ${
            !editMode ? 'input-group-not-editable' : ''
        }`}</FormLabel>
        <div
            className={`input-group ${size ? `input-group-${size}` : ''} ${
                !editMode ? '+ input-group-not-editable' : ''
            }`}
        >
            {editMode ? (
                <>
                    <input id='input2' className='form-control' type='text' defaultValue={value} onChange={onChange} />
                    <span className='input-group-btn'>
                        <Button
                            iconOnly
                            iconName='rioglyph-trash'
                            bsSize={size}
                            className={!editMode ? 'form-group-not-editable' : ''}
                        />
                    </span>
                </>
            ) : (
                <div>{value}</div>
            )}
        </div>
    </>
);

export default () => {
    const [editModes, setEditModes] = useState<Record<string, boolean>>({
        formGroupEditMode: false,
        inputGroupEditMode: false,
    });

    const [hasFormGroupExampleChanged, setHasFormGroupExampleChanged] = useState(false);
    const [hasInputGroupExampleChanged, setHasInputGroupExampleChanged] = useState(false);

    const handleFormInputChange = () => setHasFormGroupExampleChanged(true);
    const handleInputChange = () => setHasInputGroupExampleChanged(true);

    const handleChange = (key: string) => {
        const newState = !editModes[key];

        setEditModes({
            ...editModes,
            [key]: newState,
        });

        setHasFormGroupExampleChanged(false);
        setHasInputGroupExampleChanged(false);
    };

    const { formGroupEditMode, inputGroupEditMode } = editModes;

    return (
        <div className='display-grid gap-25 grid-cols-1 grid-cols-2-sm'>
            <Card className='display-flex flex-column justify-content-between' padding={25}>
                <div>
                    <div className='text-medium text-size-18 margin-bottom-5'>Size by form-group</div>
                    <Note>Different form-group sizes come with different bottom spacing</Note>
                    <hr className='margin-top-20 margin-bottom-15' />

                    <div className='h5'>Wrapped by sized form-groups</div>
                    <FormGroup
                        onChange={handleFormInputChange}
                        editMode={formGroupEditMode}
                        size='sm'
                        value='Lorem Ipsum Dolor'
                    />
                    <FormGroup
                        onChange={handleFormInputChange}
                        editMode={formGroupEditMode}
                        value='Lorem Ipsum Dolor'
                    />
                    <FormGroup
                        onChange={handleFormInputChange}
                        editMode={formGroupEditMode}
                        size='lg'
                        value='Lorem Ipsum Dolor'
                    />
                </div>

                <div className={`margin-top-25 display-flex ${formGroupEditMode ? 'justify-content-end' : ''}`}>
                    {!formGroupEditMode && (
                        <Button iconName='rioglyph-pencil' onClick={() => handleChange('formGroupEditMode')}>
                            Edit
                        </Button>
                    )}
                    {formGroupEditMode && (
                        <div className='btn-toolbar'>
                            <Button onClick={() => handleChange('formGroupEditMode')}>Cancel</Button>
                            <Button
                                bsStyle='primary'
                                disabled={!hasFormGroupExampleChanged}
                                onClick={() => handleChange('formGroupEditMode')}
                            >
                                Save changes
                            </Button>
                        </div>
                    )}
                </div>
            </Card>

            <Card className='display-flex flex-column justify-content-between' padding={25}>
                <div>
                    <div className='text-medium text-size-18 margin-bottom-5'>Size by input-group</div>
                    <Note>No form-group size results in the same bottom spacing</Note>
                    <hr className='margin-top-20 margin-bottom-15' />
                    <div className='h5'>Wrapped only by form-group</div>
                    <div className='form-group'>
                        <InputGroup
                            onChange={handleInputChange}
                            editMode={inputGroupEditMode}
                            size='sm'
                            value='Lorem Ipsum Dolor'
                        />
                    </div>
                    <div className='form-group'>
                        <InputGroup
                            onChange={handleInputChange}
                            editMode={inputGroupEditMode}
                            value='Lorem Ipsum Dolor'
                        />
                    </div>
                    <div className='form-group'>
                        <InputGroup
                            onChange={handleInputChange}
                            editMode={inputGroupEditMode}
                            size='lg'
                            value='Lorem Ipsum Dolor'
                        />
                    </div>
                </div>

                <div className={`margin-top-25 display-flex ${inputGroupEditMode ? 'justify-content-end' : ''}`}>
                    {!inputGroupEditMode && (
                        <Button iconName='rioglyph-pencil' onClick={() => handleChange('inputGroupEditMode')}>
                            Edit
                        </Button>
                    )}
                    {inputGroupEditMode && (
                        <div className='btn-toolbar'>
                            <Button onClick={() => handleChange('inputGroupEditMode')}>Cancel</Button>
                            <Button
                                bsStyle='primary'
                                disabled={!hasInputGroupExampleChanged}
                                onClick={() => handleChange('inputGroupEditMode')}
                            >
                                Save changes
                            </Button>
                        </div>
                    )}
                </div>
            </Card>
        </div>
    );
};
```

#### HTML (html)

```html
<div class="display-grid gap-25 grid-cols-1 grid-cols-2-sm">
    <div class="bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between">
        <div>
            <div class="text-medium text-size-18 margin-bottom-5">Size by form-group</div>
            <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
                <div>
                    <span class="label label-info label-condensed label-filled">Note</span>
                </div>
                <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">Different form-group sizes come with different bottom spacing</div>
            </div>
            <hr class="margin-top-20 margin-bottom-15">
            <div class="h5">Wrapped by sized form-groups</div>
            <div class="form-group form-group-sm form-group-not-editable">
                <label for="input1" class="display-inline-block">
                    <span>form-group-sm + form-group-not-editable</span>
                </label>
                <div>Lorem Ipsum Dolor</div>
            </div>
            <div class="form-group  form-group-not-editable">
                <label for="input1" class="display-inline-block">
                    <span>form-group + form-group-not-editable</span>
                </label>
                <div>Lorem Ipsum Dolor</div>
            </div>
            <div class="form-group form-group-lg form-group-not-editable">
                <label for="input1" class="display-inline-block">
                    <span>form-group-lg + form-group-not-editable</span>
                </label>
                <div>Lorem Ipsum Dolor</div>
            </div>
        </div>
        <div class="margin-top-25 display-flex ">
            <button type="button" class="btn btn-default btn-component" tabindex="0">
                <span class="rioglyph rioglyph-pencil">
                </span>Edit</button>
        </div>
    </div>
    <div class="bg-white rounded border shadow-default padding-25 display-flex flex-column justify-content-between">
        <div>
            <div class="text-medium text-size-18 margin-bottom-5">Size by input-group</div>
            <div class="display-flex gap-10 max-width-1000 margin-bottom-10 last-child-margin-bottom-0">
                <div>
                    <span class="label label-info label-condensed label-filled">Note</span>
                </div>
                <div class="width-100pct children-first-margin-top-0 children-last-margin-bottom-0 padding-top-1">No form-group size results in the same bottom spacing</div>
            </div>
            <hr class="margin-top-20 margin-bottom-15">
            <div class="h5">Wrapped only by form-group</div>
            <div class="form-group">
                <label for="input2" class="display-inline-block">
                    <span>input-group-sm input-group-not-editable</span>
                </label>
                <div class="input-group input-group-sm + input-group-not-editable">
                    <div>Lorem Ipsum Dolor</div>
                </div>
            </div>
            <div class="form-group">
                <label for="input2" class="display-inline-block">
                    <span>input-group input-group-not-editable</span>
                </label>
                <div class="input-group  + input-group-not-editable">
                    <div>Lorem Ipsum Dolor</div>
                </div>
            </div>
            <div class="form-group">
                <label for="input2" class="display-inline-block">
                    <span>input-group-lg input-group-not-editable</span>
                </label>
                <div class="input-group input-group-lg + input-group-not-editable">
                    <div>Lorem Ipsum Dolor</div>
                </div>
            </div>
        </div>
        <div class="margin-top-25 display-flex ">
            <button type="button" class="btn btn-default btn-component" tabindex="0">
                <span class="rioglyph rioglyph-pencil">
                </span>Edit</button>
        </div>
    </div>
</div>
```