PlTextField

Single- or multi-line text input. The label, the helper text and the error message are part of the component rather than three elements you wire together yourself.

React

import { PlTextField } from 'plass-ui';

<PlTextField label="Email" type="email" description="We never share it." />;

import 'package:plass_ui/plass_ui.dart';

PlTextField(
  controller: email,
  label: const Text('Email'),
  keyboardType: TextInputType.emailAddress,
  description: const Text('We never share it.'),
);

Props

Prop	Type	Default	Description
variantshared	'solid' | 'glass' | 'ghost'	'glass'	What the surface is made of. On a field solid is not a tinted pane but a well cut into the sheet — a field holds user data
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	Height and type scale. The same heights as PlButton, so a row's baseline holds
colorshared	'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'	'primary'	Semantic colour role. The glass is never dyed, so it reaches the edge, the focus ring and the caret
densityshared	'default' | 'compact'	'default'	Padding only — never the height, never the type scale
elevationshared	0 | 1 | 2 | 3	0	Drop shadow depth. A field is a well rather than a surface that floats, so the default is 0
label	ReactNode	—	Label above the control, wired to it by Base UI's Field
description	ReactNode	—	Helper text below the control
error	ReactNode	—	Error message below the control. Its presence also turns the field invalid
invalid	boolean	!!error	Forces the invalid state without a message, for when a form library owns validity
multiline	boolean	false	Renders a textarea instead of an input. Every other axis stays identical
rows	number	3	Visible rows in multiline mode
resize	'none' | 'vertical' | 'horizontal' | 'both'	'vertical'	Which way the user may drag a multiline control. Horizontal resizing breaks a form's column, so only the vertical axis is on
startIcon	ReactNode	—	Content before the control. Sized in em, so it tracks the text
endIcon	ReactNode	—	Content after the control
loading	boolean	false	Spinner in place of endIcon, and the field is marked busy. Typing is still allowed
readOnly	boolean	false	The value can be read and copied but not rewritten. Goes flat and loses most of its saturation
disabled	boolean	false	Unavailable. The page shows through the sheet, and it leaves the tab order
fullWidth	boolean	false	Stretches to the width of the container
hotKeys	Record<string, () => void>	—	Chords this control answers to, spelled the way PlHotKeys draws them — { 'Mod+Enter': save, Escape: cancel }. A chord that matches is **consumed**
classNames	{ label?, control?, description?, error?: string }	—	Classes on the parts a className does not reach. control is the part a reader acts on

Prop	Type	Default	Description
controller	TextEditingController?	—	The text being edited — where Flutter keeps text. Left out, the field owns one of its own
onChanged	ValueChanged<String>?	—	Called on every change
onSubmitted	ValueChanged<String>?	—	Called when the field is submitted from the keyboard
variantshared	PlassVariant	PlassVariant.solid	What the surface is made of. On a field solid is not a tinted pane but a well cut into the sheet — a field holds user data
sizeshared	PlassSize	PlassSize.md	Height and type scale. The same heights as PlButton, so a row's baseline holds
colorshared	PlassColor	PlassColor.primary	Semantic colour role. The glass is never dyed, so it reaches the edge, the focus ring and the caret
densityshared	PlassDensity	PlassDensity.standard	Padding only — never the height, never the type scale
elevationshared	int	0	Drop shadow depth. A field is a well rather than a surface that floats, so the default is 0
multiline	bool	false	Renders a textarea instead of an input. Every other axis stays identical
rows	int	3	Visible rows in multiline mode
label	Widget?	—	Label above the control, wired to it by Base UI's Field
description	Widget?	—	Helper text below the control
error	Widget?	—	Error message below the control. Its presence also turns the field invalid
invalid	bool?	!!error	Forces the invalid state without a message, for when a form library owns validity
placeholder	String?	—	What is shown while the field is empty. A native attribute in React, so it has no row there
startIcon	Widget?	—	Content before the control. Sized in em, so it tracks the text
endIcon	Widget?	—	Content after the control
loading	bool	false	Spinner in place of endIcon, and the field is marked busy. Typing is still allowed
fullWidth	bool	false	Stretches to the width of the container
readOnly	bool	false	The value can be read and copied but not rewritten. Goes flat and loses most of its saturation
disabled	bool	false	Unavailable. The page shows through the sheet, and it leaves the tab order
obscureText	bool	false	Hides what is typed, for a password
keyboardType	TextInputType?	—	Which keyboard to raise on a touch device
maxLength	int?	—	How many characters the field will take. A formatter rather than a counter: nothing is drawn under the field
semanticLabel	String?	—	The name a screen reader announces, for a field with no visible label. A placeholder is not a name
hotKeys	PlassHotKeys?	—	Chords this control answers to, spelled the way PlHotKeys draws them — { 'Mod+Enter': save, Escape: cancel }. A chord that matches is **consumed**

Every native <input> attribute passes straight through, and in multiline mode every <textarea> attribute does. The exceptions are color and size, which are the shared axes above.

A className lands on the stack that holds the label, the control and the two lines under it. classNames reaches the four parts inside it: label, control (the box the text goes in) description and error.

The value lives in a TextEditingController, which is where Flutter keeps text. Left out, the field owns one, but a field whose value the app needs is a field the app should hand a controller to.

Under it is EditableText rather than a TextField: the latter is Material, and this package imports neither Material nor Cupertino. What Material adds on top (the decoration, the counter, the ripple) is what this component is instead of.

What the shared axes mean across the library is in prop conventions.

Examples

variant

glass is the default: a sheet with a hairline round it, drawn in --plass-border rather than the sheet's own white edge. A field usually sits on a card, and a white line round a near-white box on a white card has no visible shape. solid is the well, the glass at its most opaque with the library's one inset shadow in it, for a field that should read as recessed. ghost has no surface until the pointer is on it, for a field in a table cell.

A solid field is deliberately not a tinted pane. A gradient under a caret, a text selection and a placeholder is not legible, so the family shows up in the hairline, the ring and the caret instead.

React

import { PlTextField } from 'plass-ui';

export default function TextFieldVariants() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <PlTextField variant="glass" label="glass" placeholder="A sheet with a hairline" />
      <PlTextField variant="solid" label="solid" placeholder="A well cut into the sheet" />
      <PlTextField variant="ghost" label="ghost" placeholder="No surface until you go near it" />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class TextFieldVariants extends StatelessWidget {
  const TextFieldVariants({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          PlTextField(
            fullWidth: true,
            label: Text('glass'),
            placeholder: 'A sheet with a hairline',
          ),
          PlTextField(
            fullWidth: true,
            variant: PlassVariant.solid,
            label: Text('solid'),
            placeholder: 'A well cut into the sheet',
          ),
          PlTextField(
            fullWidth: true,
            variant: PlassVariant.ghost,
            label: Text('ghost'),
            placeholder: 'No surface until you go near it',
          ),
        ],
      ),
    );
  }
}

size

The same ladder PlButton uses, xs 24px · sm 32px · md 40px · lg 48px · xl 56px, so a field and a button of the same size line up on one row.

React

import { PlTextField } from 'plass-ui';

export default function TextFieldSizes() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <PlTextField size="xs" placeholder="Extra small" />
      <PlTextField size="sm" placeholder="Small" />
      <PlTextField size="md" placeholder="Medium" />
      <PlTextField size="lg" placeholder="Large" />
      <PlTextField size="xl" placeholder="Extra large" />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class TextFieldSizes extends StatelessWidget {
  const TextFieldSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          for (final size in PlassSize.values)
            PlTextField(fullWidth: true, size: size, placeholder: size.name),
        ],
      ),
    );
  }
}

label, description and error

All three are nodes, and all three are wired to the control by Base UI's Field: the label points at it, and both messages end up in its aria-describedby.

All three are widgets, and all three are part of the field's own semantics node, so a screen reader reads the label, the field and the message as one thing rather than as three.

There is no floating-label variant. A floating label needs a transform on the thing being typed into, and a label that moves under the caret is the one effect this library rules out on a control.

Validation

error carries a message and turns the field invalid, which re-points the whole slot family at danger, the hairline, the focus ring, the caret and the message all turn over together.

Two escape hatches, for when a form library owns the validity: invalid forces the state without a message, and invalid={false}invalid: false shows a message without it.

React

import { useState } from 'react';
import { PlButton, PlTextField } from 'plass-ui';

export default function TextFieldValidation() {
  const [value, setValue] = useState('acme inc');
  const message = value.includes(' ') ? 'Spaces are not allowed.' : undefined;

  return (
    <div className="flex w-full max-w-sm items-end gap-3">
      <PlTextField
        fullWidth
        label="Workspace"
        value={value}
        error={message}
        description={message ? undefined : 'Letters, numbers and dashes.'}
        onChange={(event) => setValue(event.target.value)}
      />
      <PlButton disabled={Boolean(message)}>Create</PlButton>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

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

  @override
  State<TextFieldValidation> createState() => _TextFieldValidationState();
}

class _TextFieldValidationState extends State<TextFieldValidation> {
  final TextEditingController _workspace = TextEditingController(text: 'acme inc');
  String _value = 'acme inc';

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

  @override
  Widget build(BuildContext context) {
    final invalid = _value.contains(' ');

    return SizedBox(
      width: 384,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.end,
        spacing: 12,
        children: <Widget>[
          Expanded(
            child: PlTextField(
              fullWidth: true,
              controller: _workspace,
              label: const Text('Workspace'),
              onChanged: (String next) => setState(() => _value = next),
              error: invalid ? const Text('Spaces are not allowed.') : null,
              description: invalid ? null : const Text('Letters, numbers and dashes.'),
            ),
          ),
          PlButton(disabled: invalid, onPressed: () {}, child: const Text('Create')),
        ],
      ),
    );
  }
}

multiline

Every other axis is identical, and a one-row multiline field is exactly as tall as the single-line field of the same size. The vertical padding is derived from the height ladder, so density never touches it.

Renders a <textarea>. resize decides which way the user may drag it; horizontal resizing breaks a form's column, so only the vertical axis is on by default.

There is no resize. A textarea's drag handle is the browser's, and Flutter has no equivalent to offer, a field that has to change size is one the layout around it resizes.

React

import { PlTextField } from 'plass-ui';

export default function TextFieldMultiline() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <PlTextField multiline rows={1} label="One row" placeholder="Exactly a single-line field" />
      <PlTextField
        multiline
        label="Release note"
        rows={4}
        description="Markdown is not rendered here."
      />
      <PlTextField
        multiline
        resize="none"
        rows={2}
        label="Fixed"
        defaultValue="Cannot be dragged."
      />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class TextFieldMultiline extends StatelessWidget {
  const TextFieldMultiline({super.key});

  @override
  Widget build(BuildContext context) {
    return const SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          PlTextField(
            fullWidth: true,
            multiline: true,
            rows: 1,
            label: Text('One row'),
            placeholder: 'Exactly a single-line field',
          ),
          PlTextField(
            fullWidth: true,
            multiline: true,
            rows: 4,
            label: Text('Release note'),
            description: Text('Markdown is not rendered here.'),
          ),
        ],
      ),
    );
  }
}

startIcon and endIcon

Sized against the text rather than against the row. They sit on the shell rather than inside the control, and they answer its focus. An adornment goes from muted to the accent colour when the field is focused.

An adornment is centred on the control's first line, so it stays where it is when a multiline field grows.

React

import { PlTextField } from 'plass-ui';

function SearchIcon() {
  return (
    <svg viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" aria-hidden="true">
      <circle cx="7" cy="7" r="4.5" />
      <path d="m10.5 10.5 3 3" strokeLinecap="round" />
    </svg>
  );
}

export default function TextFieldIcons() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <PlTextField startIcon={<SearchIcon />} placeholder="Search projects" />
      <PlTextField label="Domain" defaultValue="acme" endIcon={<span>.plass.dev</span>} />
      <PlTextField label="Checking availability" defaultValue="acme" loading />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

/// A magnifier, which is the whole glyph a search field needs.
class _SearchGlyph extends StatelessWidget {
  const _SearchGlyph();

  @override
  Widget build(BuildContext context) {
    final theme = IconTheme.of(context);

    return CustomPaint(
      size: Size.square(theme.size ?? 16),
      painter: _SearchPainter(theme.color ?? const Color(0xFF000000)),
    );
  }
}

class _SearchPainter extends CustomPainter {
  const _SearchPainter(this.color);

  final Color color;

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.6
      ..strokeCap = StrokeCap.round
      ..color = color;

    canvas
      ..save()
      ..scale(size.shortestSide / 16)
      ..drawCircle(const Offset(7, 7), 4.5, paint)
      ..drawLine(const Offset(10.5, 10.5), const Offset(13.5, 13.5), paint)
      ..restore();
  }

  @override
  bool shouldRepaint(_SearchPainter oldDelegate) => oldDelegate.color != color;
}

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

  @override
  State<TextFieldIcons> createState() => _TextFieldIconsState();
}

class _TextFieldIconsState extends State<TextFieldIcons> {
  final TextEditingController _domain = TextEditingController(text: 'acme');
  final TextEditingController _checking = TextEditingController(text: 'acme');

  @override
  void dispose() {
    _domain.dispose();
    _checking.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          const PlTextField(
            fullWidth: true,
            startIcon: _SearchGlyph(),
            placeholder: 'Search projects',
          ),
          PlTextField(
            fullWidth: true,
            controller: _domain,
            label: const Text('Domain'),
            endIcon: const Text('.plass.dev'),
          ),
          PlTextField(
            fullWidth: true,
            controller: _checking,
            label: const Text('Checking availability'),
            loading: true,
          ),
        ],
      ),
    );
  }
}

loading · readOnly · disabled

prop	Appearance	Typing	Focus
loading	A spinner takes the endIcon slot	Allowed	Kept
readOnly	Keeps its colour, goes flat, drains saturation	Blocked, but selectable	Kept
disabled	The page shows through the sheet	Blocked	Lost

loading deliberately still allows typing: a field is usually loading because of what was typed into it.

React

import { PlTextField } from 'plass-ui';

export default function TextFieldStates() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <PlTextField label="Idle" placeholder="Type here" />
      <PlTextField label="Loading" defaultValue="acme-inc" loading />
      <PlTextField label="Read-only" defaultValue="acme-inc" readOnly />
      <PlTextField label="Disabled" defaultValue="acme-inc" disabled />
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

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

  @override
  State<TextFieldStates> createState() => _TextFieldStatesState();
}

class _TextFieldStatesState extends State<TextFieldStates> {
  final List<TextEditingController> _filled = <TextEditingController>[
    TextEditingController(text: 'acme-inc'),
    TextEditingController(text: 'acme-inc'),
    TextEditingController(text: 'acme-inc'),
  ];

  @override
  void dispose() {
    for (final controller in _filled) {
      controller.dispose();
    }
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        spacing: 16,
        children: <Widget>[
          const PlTextField(fullWidth: true, label: Text('Idle'), placeholder: 'Type here'),
          PlTextField(
            fullWidth: true,
            controller: _filled[0],
            label: const Text('Loading'),
            loading: true,
          ),
          PlTextField(
            fullWidth: true,
            controller: _filled[1],
            label: const Text('Read-only'),
            readOnly: true,
          ),
          PlTextField(
            fullWidth: true,
            controller: _filled[2],
            label: const Text('Disabled'),
            disabled: true,
          ),
        ],
      ),
    );
  }
}

hotKeys

A field that saves on Mod+Enter and clears on Escape is a form of keyboard affordance that has nowhere else to live. hotKeys is a map from a chord to what pressing it does, written in the same vocabulary PlHotKeys draws, so the cap printed beside the field and the key that actually works come from one string, and cannot drift apart.

Mod resolves per platform: one entry is ⌘ on a Mac and Ctrl everywhere else. Esc, Return, Cmd and Option fold onto the same keys their caps do.

A chord that matches is consumed. The handler runs and the key goes no further, so Escape bound here does not also close the dialog around the field, and Enter does not also submit the form. That is what binding a key means, and it is why these are chords rather than letters: { a: … } is a field that cannot type an a.

React

import { useState } from 'react';
import { PlHotKeys, PlTextField } from 'plass-ui';

export default function TextFieldHotKeys() {
  const [note, setNote] = useState('');
  const [saved, setSaved] = useState<string | null>(null);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PlTextField
        fullWidth
        multiline
        rows={3}
        label="Note"
        placeholder="Write something, then press the shortcut"
        value={note}
        onChange={(event) => setNote(event.target.value)}
        description={
          <span className="flex items-center gap-1.5">
            <PlHotKeys keys="Mod+Enter" size="xs" /> to save, <PlHotKeys keys="Escape" size="xs" />{' '}
            to clear
          </span>
        }
        hotKeys={{
          'Mod+Enter': () => setSaved(note),
          Escape: () => {
            setNote('');
            setSaved(null);
          }
        }}
      />

      <p className="text-sm text-(--plass-muted-fg)">
        {saved === null ? 'Nothing saved yet.' : `Saved: ${saved}`}
      </p>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

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

  @override
  State<TextFieldHotKeys> createState() => _TextFieldHotKeysState();
}

class _TextFieldHotKeysState extends State<TextFieldHotKeys> {
  final TextEditingController _note = TextEditingController();
  String? _saved;

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        spacing: 12,
        children: <Widget>[
          PlTextField(
            fullWidth: true,
            multiline: true,
            rows: 3,
            controller: _note,
            label: const Text('Note'),
            placeholder: 'Write something, then press the shortcut',
            description: const Row(
              mainAxisSize: MainAxisSize.min,
              spacing: 6,
              children: <Widget>[
                PlHotKeys(keys: 'Mod+Enter', size: PlassSize.xs),
                Text('to save,'),
                PlHotKeys(keys: 'Escape', size: PlassSize.xs),
                Text('to clear'),
              ],
            ),
            hotKeys: <String, VoidCallback>{
              'Mod+Enter': () => setState(() => _saved = _note.text),
              'Escape': () => setState(() {
                _note.clear();
                _saved = null;
              }),
            },
          ),
          PlTypography(
            _saved == null ? 'Nothing saved yet.' : 'Saved: $_saved',
            level: PlTypographyLevel.caption,
          ),
        ],
      ),
    );
  }
}

Controlled

value and onChange behave exactly as they do on a native input; onChange is typed to accept either element so the same handler works in multiline mode.

The controller is the value, and onChanged is told about every change. maxLength is a formatter rather than a counter: it stops the twenty-fifth character from arriving, and nothing is drawn under the field unless you draw it.

React

import { useState } from 'react';
import { PlTextField } from 'plass-ui';

export default function TextFieldControlled() {
  const [value, setValue] = useState('');

  return (
    <div className="grid w-full max-w-sm gap-2">
      <PlTextField
        label="Display name"
        value={value}
        maxLength={24}
        placeholder="Ada Lovelace"
        onChange={(event) => setValue(event.target.value)}
      />
      <p className="text-xs text-(--plass-muted-fg)">{value.length}/24</p>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

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

  @override
  State<TextFieldControlled> createState() => _TextFieldControlledState();
}

class _TextFieldControlledState extends State<TextFieldControlled> {
  final TextEditingController _name = TextEditingController();
  int _length = 0;

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

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 384,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.min,
        spacing: 8,
        children: <Widget>[
          PlTextField(
            fullWidth: true,
            controller: _name,
            label: const Text('Display name'),
            placeholder: 'Ada Lovelace',
            maxLength: 24,
            onChanged: (String next) => setState(() => _length = next.length),
          ),
          PlTypography('$_length/24', level: PlTypographyLevel.caption),
        ],
      ),
    );
  }
}

Accessibility

• Renders a native <input>, or a <textarea> under multiline. Both take every attribute their element takes.
• label is a real <label> pointing at the control. Without one, give the field an aria-label or a placeholder that is not the only name it has.
• description and error both land in aria-describedby, so a screen reader reads the message with the field rather than after it.
• error and invalid set aria-invalid.
• The focus ring is drawn on the shell rather than on the control, so it traces the glass edge instead of a rectangle floating inside it. It appears on :focus-visible only.
• Clicking the shell's padding puts the caret in the field, the way clicking inside a native input does.

• Announced as a text field, and as read-only or unavailable when it is.
• The label, the field, the description and the message are one semantics node, so a screen reader reads them together rather than one after another. Without a visible label, give the field a semanticLabel. A placeholder is not a name.
• The focus ring is drawn on the shell rather than on the editor, so it traces the glass edge instead of a rectangle floating inside it. It appears only on what CSS calls :focus-visible.
• Pressing the shell's padding puts the caret in the field, the way pressing inside a native input does.
• A selection is made by dragging and has no handles to adjust afterwards: the drag handles a touch platform puts under one belong to Material and Cupertino, and this package imports neither.

Differences from the React build

React	Flutter	Why
value / onChange	controller / onChanged	A TextEditingController is where Flutter keeps text, and it is what a caller already has.
type="email"	keyboardType	Flutter's way of saying which keyboard to raise.
resize	—	A textarea's drag handle is the browser's, and there is no equivalent to offer.
a <textarea> under multiline	the same widget, taller	There is one editor either way, so switching to multiline genuinely changes nothing but the height.
aria-describedby wiring	one merged semantics node	The same result by a different route.
selection handles on touch	—	They belong to Material and Cupertino, which this package does not import.
className, style, native attributes	—	There is no class list and no style attribute to pass through.