Togglable input

A checkbox element which wraps the given input and allows to hide/show it based on the checkbox's checked state.

Examples

Standalone

Result

Loading...

Live Editor

function ExampleStandalone() {
    const [ checked, setChecked ] = React.useState(false);
    const [ value, setValue ] = React.useState('');
    return (
        <TogglableInput
            id="togglable-input-standalone-toggle-001"
            name="active"
            label="Hide input"
            checked={checked}
            onChange={(event) => setChecked(!checked)}
        >
            <Input
                id="togglable-input-standalone-input-001"
                name="name"
                value={value}
                onChange={({ target }) => setValue(target.value)}
            />
        </TogglableInput>
    );
}

With form element

Result

Loading...

Live Editor

function ExampleWithFormElement() {
    const [ checked, setChecked ] = React.useState(false);
    const [ value, setValue ] = React.useState('');
    return (
        <FormElement
            label="Toggable input"
            toggleElement={(
                <TogglableInput
                    id="togglable-input-form-element-toggle-001"
                    name="active"
                    label="Hide input"
                    checked={checked}
                    onChange={(event) => setChecked(!checked)}
                />
            )}
        >
            <Input
                id="togglable-input-form-element-input-001"
                name="name"
                value={value}
                onChange={({ target }) => setValue(target.value)}
            />
        </FormElement>
    );
}