Neumorphic Well

inputhtmlreactvue

Live

Rendered live with React 19.2.7

neumorphic-well.tsxplain css only

import './neumorphic-well.css';

import { useState } from 'react';

interface Props {
  value?: string;
  defaultValue?: string;
  disabled?: boolean;
}

export function NeumorphicWell({ value, defaultValue = '', disabled = false }: Props) {
  const [internal, setInternal] = useState(defaultValue);
  const current = value ?? internal;

  return (
    <span className="nmwl">
      <input
        className="nmwl__field"
        type="text"
        placeholder="Search"
        value={current}
        disabled={disabled || undefined}
        onChange={(event) => setInternal(event.target.value)}
      />
      <button
        className="nmwl__go"
        type="button"
        tabIndex={disabled ? -1 : 0}
        aria-label="Submit"
        disabled={disabled || undefined}
      >
        &#8618;
      </button>
    </span>
  );
}

dependencies

react@19.2.7the dialect you are reading

Built on Astro: the stage mounts the exhibit's actual React or Vue file as a live island. Pick the framework and the stage, the code and the dependency list agree.

Soft-UI, stated as a contract: the #e0e5ec surface and its paired shadows are the concept, so no mode block retints them — themeable neumorphism would mean different shadow distances, not a different hue family, and this study refuses the confusion.

The input is an inset well (inner shadows, flipped), the button a raised one. One surface, two elevations — the entire style in a single row.