Textareas

Ported from HyperUI’s Textareas — see Attribution.

Base

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class NeobrutalismTextareas1Example extends StatefulWidget {
  const NeobrutalismTextareas1Example({super.key});

  @override
  State<NeobrutalismTextareas1Example> createState() =>
      _NeobrutalismTextareas1ExampleState();
}

class _NeobrutalismTextareas1ExampleState
    extends State<NeobrutalismTextareas1Example> {
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isSmUp = MediaQuery.sizeOf(context).width >= 640;
    final fontSize = isSmUp ? 14.0 : 16.0;
    final lineHeight = isSmUp ? 20.0 : 24.0;
    final baseStyle =
        Theme.of(context).textTheme.bodyLarge ?? const TextStyle();
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Style(
      'mx-auto max-w-lg p-6',
      child: Style(
        'text-black dark:text-white',
        display: DisplayType.block,
        children: [
          const Style(
            'text-sm font-semibold',
            display: DisplayType.inline,
            child: Text('Notes'),
          ),
          Style(
            'mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-yellow-600',
            child: TextFormField(
              controller: _controller,
              maxLines: 4,
              minLines: 4,
              style: baseStyle.copyWith(
                fontSize: fontSize,
                height: lineHeight / fontSize,
                color: isDark ? Colors.white : Colors.black,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Original HTML

<label for="Notes" class="text-black">
  <span class="text-sm font-semibold"> Notes </span>

  <textarea
    id="Notes"
    class="mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm"
    rows="4"
  ></textarea>
</label>

Actions inside

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class NeobrutalismTextareas2Example extends StatefulWidget {
  const NeobrutalismTextareas2Example({super.key});

  @override
  State<NeobrutalismTextareas2Example> createState() =>
      _NeobrutalismTextareas2ExampleState();
}

class _NeobrutalismTextareas2ExampleState
    extends State<NeobrutalismTextareas2Example> {
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isSmUp = MediaQuery.sizeOf(context).width >= 640;
    final fontSize = isSmUp ? 14.0 : 16.0;
    final lineHeight = isSmUp ? 20.0 : 24.0;
    final baseStyle =
        Theme.of(context).textTheme.bodyLarge ?? const TextStyle();
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Style(
      'mx-auto max-w-lg p-6',
      child: Style(
        'text-black dark:text-white',
        display: DisplayType.block,
        children: [
          const Style(
            'text-sm font-semibold',
            display: DisplayType.inline,
            child: Text('Notes'),
          ),
          Style(
            'relative mt-0.5 overflow-hidden border-2 border-black shadow-[4px_4px_0_0] shadow-black focus-within:ring-2 focus-within:ring-yellow-300 dark:border-white dark:shadow-white dark:focus-within:ring-yellow-600',
            children: [
              Style(
                'w-full resize-none border-0 bg-white focus:ring-0 sm:text-sm dark:bg-gray-900',
                child: TextFormField(
                  controller: _controller,
                  maxLines: 4,
                  minLines: 4,
                  style: baseStyle.copyWith(
                    fontSize: fontSize,
                    height: lineHeight / fontSize,
                    color: isDark ? Colors.white : Colors.black,
                  ),
                  decoration: const InputDecoration(
                    border: InputBorder.none,
                    enabledBorder: InputBorder.none,
                    focusedBorder: InputBorder.none,
                  ),
                ),
              ),
              Style(
                'flex items-center justify-end gap-3 border-t-2 border-black p-3 dark:border-white',
                children: const [
                  Style(
                    'border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
                    child: Text('Clear'),
                  ),
                  Style(
                    'border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:bg-yellow-700 dark:text-white dark:shadow-white dark:hover:bg-yellow-500 dark:focus:bg-yellow-700 dark:focus:ring-yellow-600',
                    child: Text('Save'),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Original HTML

<label for="Notes" class="text-black">
  <span class="text-sm font-semibold"> Notes </span>

  <div
    class="relative mt-0.5 overflow-hidden border-2 border-black shadow-[4px_4px_0_0] shadow-black focus-within:ring-2 focus-within:ring-yellow-300"
  >
    <textarea
      id="Notes"
      class="w-full resize-none border-0 bg-white focus:ring-0 sm:text-sm"
      rows="4"
    ></textarea>

    <div class="flex items-center justify-end gap-3 border-t-2 border-black p-3">
      <button
        type="button"
        class="border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        Clear
      </button>

      <button
        type="button"
        class="border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
      >
        Save
      </button>
    </div>
  </div>
</label>

Actions outside

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class NeobrutalismTextareas3Example extends StatefulWidget {
  const NeobrutalismTextareas3Example({super.key});

  @override
  State<NeobrutalismTextareas3Example> createState() =>
      _NeobrutalismTextareas3ExampleState();
}

class _NeobrutalismTextareas3ExampleState
    extends State<NeobrutalismTextareas3Example> {
  final _controller = TextEditingController();

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    final isSmUp = MediaQuery.sizeOf(context).width >= 640;
    final fontSize = isSmUp ? 14.0 : 16.0;
    final lineHeight = isSmUp ? 20.0 : 24.0;
    final baseStyle =
        Theme.of(context).textTheme.bodyLarge ?? const TextStyle();
    final isDark = Theme.of(context).brightness == Brightness.dark;

    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        Style(
          'text-black dark:text-white',
          display: DisplayType.block,
          children: [
            const Style(
              'text-sm font-semibold',
              display: DisplayType.inline,
              child: Text('Notes'),
            ),
            Style(
              'mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-yellow-600',
              child: TextFormField(
                controller: _controller,
                maxLines: 4,
                minLines: 4,
                style: baseStyle.copyWith(
                  fontSize: fontSize,
                  height: lineHeight / fontSize,
                  color: isDark ? Colors.white : Colors.black,
                ),
              ),
            ),
          ],
        ),
        Style(
          'mt-3 flex items-center justify-end gap-3',
          children: const [
            Style(
              'border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:text-white dark:shadow-white dark:hover:bg-yellow-700 dark:focus:ring-yellow-600',
              child: Text('Clear'),
            ),
            Style(
              'border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0 dark:bg-yellow-700 dark:text-white dark:shadow-white dark:hover:bg-yellow-500 dark:focus:bg-yellow-700 dark:focus:ring-yellow-600',
              child: Text('Save'),
            ),
          ],
        ),
      ],
    );
  }
}

Original HTML

<div>
  <label for="Notes" class="text-black">
    <span class="text-sm font-semibold"> Notes </span>

    <textarea
      id="Notes"
      class="mt-0.5 w-full resize-none border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black focus:ring-2 focus:ring-yellow-300 sm:text-sm"
      rows="4"
    ></textarea>
  </label>

  <div class="mt-3 flex items-center justify-end gap-3">
    <button
      type="button"
      class="border-2 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Clear
    </button>

    <button
      type="button"
      class="border-2 bg-yellow-200 px-3 py-1.5 text-sm font-semibold text-black shadow-[2px_2px_0_0] shadow-black hover:bg-yellow-400 focus:bg-yellow-200 focus:ring-2 focus:ring-yellow-300 focus:outline-0"
    >
      Save
    </button>
  </div>
</div>