<InputField
    name='password'
    label='Password'
    leading={<LockIcon />}
    placeholder='Enter password'
    class={'!ps-8 !pe-16'}
/>

const Input: Component<InputProps> = (props) => {
    const [local, rest] = splitProps(props, ['leading', 'trailing', 'class', 'variant', 'size']);

    //const hasLeading = createMemo(() => local.leading); // this works
    //const hasLeading = local.leading; // this works
    return (
        <div class={'relative'}>
            {/* this throws a hydration error */}
            <Show when={local.leading}>
                {(leading) => (
                    <div class='absolute inset-y-0 left-0 flex items-center ps-1 pointer-events-none'>
                        {leading()}
                    </div>
                )}
            </Show>

            {/*    unrelated rest... */}
        </div>
    );
};

<InputField
    name='password'
    label='Password'
    leading={<LockIcon />}
    placeholder='Enter password'
    class={'!ps-8 !pe-16'}
/>

const Input: Component<InputProps> = (props) => {
    const [local, rest] = splitProps(props, ['leading', 'trailing', 'class', 'variant', 'size']);

    //const hasLeading = createMemo(() => local.leading); // this works
    //const hasLeading = local.leading; // this works
    return (
        <div class={'relative'}>
            {/* this throws a hydration error */}
            <Show when={local.leading}>
                {(leading) => (
                    <div class='absolute inset-y-0 left-0 flex items-center ps-1 pointer-events-none'>
                        {leading()}
                    </div>
                )}
            </Show>

            {/*    unrelated rest... */}
        </div>
    );
};

This leads to a situation in which the server-rendered HTML doesn’t include ”Required” and ”Default” (since the signals are false) but the client-rendered HTML does therefore leading to your hydration error

This leads to a situation in which the server-rendered HTML doesn’t include ”Required” and ”Default” (since the signals are false) but the client-rendered HTML does therefore leading to your hydration error

setViewable(...initialViewable ) // is invalid
setViewable(() => ({...initialViewable })) // doesnt do anything
setViewable((prev) => ({...prev, ...initialViewable })) // doesnt do anything

setViewable(...initialViewable ) // is invalid
setViewable(() => ({...initialViewable })) // doesnt do anything
setViewable((prev) => ({...prev, ...initialViewable })) // doesnt do anything