@rio-cloud/uikit-mcp 1.1.8 → 1.1.10

package/dist/docs/templates/form-toggle.md

@@ -0,0 +1,329 @@
+# Form toggle
+
+*Category:* Templates
+*Section:* Forms
+*Source:* https://uikit.developers.rio.cloud/#/templates/form-toggle
+*Captured:* 2026-04-20T12:55:45.127Z
+
+## 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>
+```