Dissolve Input
A pill text field whose submitted text breaks into drifting canvas grains, then the field resets.
Preview
Pebble notes · #studio
3 online
Priya9:41
Draft of the Q3 research notes is in the shared folder.
Malik9:52
Read it. Two charts still need captions.
Install
Pro source requires Pebble Pro. Try the full preview above.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | required | Accessible label; visually hidden unless showLabel. |
| showLabel | boolean | false | Show the label above the field. |
| onSubmit | (value: string) => void | Promise<void> | required | Called on Enter or button. Throw or reject to keep the text and show the error. |
| defaultValue | string | "" | Initial text. |
| submitLabel | string | "Send" | Accessible name of the submit button. |
| sentMessage | string | "Sent" | Announced in a polite live region after success. |
| errorMessage | string | "Could not send. Try again." | Shown and announced when onSubmit fails. |
| direction | "end-to-start" | "start-to-end" | "end-to-start" | Which end of the text breaks up first. |
| drift | "right" | "up" | "right" | Where the grains travel. |
| duration | number | 1000 | Length of the dissolve in ms. |
| seed | number | 1 | Seed for the grain layout (deterministic PRNG). |
| size | "sm" | "md" | "md" | Height and padding. |
| formClassName | string | — | Classes for the outer form; className styles the pill. |
| hint | string | — | One line of helper text under the field, linked as its description. |
| icon | ReactNode | — | Leading icon inside the field (16 px, decorative). |
| invalid | boolean | false | Show the error state with errorMessage, e.g. for a server-side rejection. |
Pro component
Try the full preview above. Editable source and build guides require Pebble Pro.