{"node":{"id":"652bb4cd-0dc8-432d-b2c5-f571a5e308d2","handle":"652b","type":"note","authorName":"Vincent Yeung","intent":"learning","title":"Tool: Astryx forms","aiSummary":null,"content":"## What it does\n- Ready-made React form controls from Meta's Astryx library.\n- Each one comes with its label, description and error status built in.\n\n## When to reach for it\n- A React 19 site needs forms that already handle labels, help text and errors.\n- You need harder controls such as file upload, multi-select chips or a filter bar.\n\n## How to use it\n- Install Astryx first. See Source: Astryx.\n- Pick the control by the job:\n  - `TextInput` for short text: names, emails, search.\n  - `TextArea` for longer text.\n  - `NumberInput` with min, max, steps and checks.\n  - `Selector` to choose one option from a list.\n  - `MultiSelector`, a checkbox dropdown for a known set.\n  - `Typeahead`, a search box with suggestions.\n  - `Tokenizer`, a searchable multi-select that shows choices as removable chips.\n  - `CheckboxInput` for one on/off choice, `CheckboxList` for a visible group, `RadioList` for one of several.\n  - `Switch` for settings that apply at once. If it needs a submit, use a checkbox.\n  - `FileInput` for one or many files, with drag and drop and checks on type, size and count.\n  - Also `Slider`, `SegmentedControl`, `Calendar`, `SelectableCard`.\n- `Field` wraps your own or third-party controls in the same label and error shell.\n- `InputGroup` joins an input to a prefix or suffix inside one border.\n- `FormLayout` places the fields but doesn't handle state or sending. Wrap it in a `<form>`.\n- `PowerSearch` is a structured filter bar. For a simple search, use a text input.\n- Inputs are controlled: you pass `value` and `onChange`.\n- Look up any control's props with `npx @astryxdesign/cli component TextInput`.\n\n## What happened when we used it\n- Our build tried Astryx and found its form parts strong.\n\n## Source\n- Source: Astryx.","capturedAt":"2026-10-29T09:31:10.900Z","createdAt":"2026-10-29T09:31:10.901Z","updatedAt":"2026-10-29T09:31:10.901Z","spanId":null,"contributor":null,"audiences":[{"kind":"public","createdAt":"2026-11-06T04:27:17.050Z"}],"fingerprint":"100abb4f344196d894688c0c46799e4f88d89b136b3ee53ff8f205f218929e35","revisionNo":"1","structureHash":"706bfddf88472bf50997bb2c0db60b9a8a8f2d11bc773b3ca071064762bd373e","page":"https://lattris.com/by/b/memories/652bb4cd-0dc8-432d-b2c5-f571a5e308d2"},"links":[{"direction":"out","verb":"references","reason":"Follow to install it, or to check its licence and cautions before relying on it.","hash":"bb3be8752b56f3f103ba77cec62645eeedcb5b8387bd9500af2323e8a39b6bc7","node":{"id":"2f2c0edd-25d7-48f1-8130-b1fe4c351f65","handle":"2f2c","type":"note","title":"Source: Astryx","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65?links=1","fingerprint":"d761ec49db42fdd14c0969ea58965fac3359b23f1d42679abe0f507d95208719","revisionNo":"2","structureHash":"ee089e894f5fbd9426846cab5da491a0b2750257bd73c23532be7958ca7fa3b9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65"}},{"direction":"out","verb":"references","reason":"Follow to make the forms match your look.","hash":"a5daa1a64cadfc71b3cb5be62fb753758ca87e53878ace19435e511fe6768161","node":{"id":"803f6d6d-0ecf-4a9c-8438-26d25e3f73b7","handle":"803f","type":"note","title":"Tool: Astryx theming","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7?links=1","fingerprint":"dc9053afefddf3d2523af49f2dc7652c9ce9955adc55647354c3fbbbee347beb","revisionNo":"1","structureHash":"f8aecdf69fc5b9e2c44844d6a75246bb7995d69e7545fae9599379f4f58453e9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/803f6d6d-0ecf-4a9c-8438-26d25e3f73b7"}},{"direction":"in","verb":"references","reason":"Follow to see how to use this capability.","hash":"6a85e784e82700789ed13b5152d0ab5190663a7a48c610755ea46ede1a659c41","node":{"id":"2f2c0edd-25d7-48f1-8130-b1fe4c351f65","handle":"2f2c","type":"note","title":"Source: Astryx","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65?links=1","fingerprint":"d761ec49db42fdd14c0969ea58965fac3359b23f1d42679abe0f507d95208719","revisionNo":"2","structureHash":"ee089e894f5fbd9426846cab5da491a0b2750257bd73c23532be7958ca7fa3b9","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/2f2c0edd-25d7-48f1-8130-b1fe4c351f65"}},{"direction":"in","verb":"references","reason":"Pick it when you build on React and need well-behaved form controls quickly.","hash":"94e1b71b5b07bf733b1efc1571c1162bbe0bfbc25f27217ff45bd82f5409bdb8","node":{"id":"8702376d-5485-4f66-bb7b-127ebcc5dfb3","handle":"8702","type":"note","title":"Drawer 4: Behaviour","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/8702376d-5485-4f66-bb7b-127ebcc5dfb3?links=1","fingerprint":"3410ba76e704aa17b24369274db790497faa4d19c466648552725a87c6f439fc","revisionNo":"2","structureHash":"333a308f19d9c0501d6ede7ccb1ef3ec6254d3806322959c7fea97d305bbe1b0","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/8702376d-5485-4f66-bb7b-127ebcc5dfb3"}},{"direction":"in","verb":"references","reason":"Pick it when the site needs real forms on React.","hash":"60bfa500abcd10e58af6f876b9eb5f870687762c0598ed9c92708925885c1f43","node":{"id":"98841826-13b8-4843-ba74-fd26981525db","handle":"9884","type":"note","title":"Drawer 5: Building it","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/98841826-13b8-4843-ba74-fd26981525db?links=1","fingerprint":"5ed8da87f333ea517c55f8b050ca46d893bb1b907cb1151fa7feef68cc0cccdf","revisionNo":"3","structureHash":"f4b3deab8497b5b9ae3a7026a8ae25e2d882e23aeece6ec80513f14acd2b4221","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/98841826-13b8-4843-ba74-fd26981525db"}},{"direction":"in","verb":"references","reason":"Follow for which form control fits which job.","hash":"05e6fa4ae2cf6edcefe5ebdd751327c56d954414839080273a00a8cbf9c538ed","node":{"id":"ff94b18f-43e0-4c83-a456-25cc433dbfd7","handle":"ff94","type":"note","title":"Tool: Astryx for agents (CLI and MCP server)","aiSummary":null,"erased":false,"href":"https://lattris.com/api/lattris/by/b/memories/ff94b18f-43e0-4c83-a456-25cc433dbfd7?links=1","fingerprint":"52ba88470bbc1372c6f33fff25d588124335bc2775fe4cde42e7e883e8d76896","revisionNo":"1","structureHash":"fca111ae4ffb0caf03fabbc5422e51fd57b197cf8653f02d652a50916226c131","intent":"learning","authorName":"Vincent Yeung","page":"https://lattris.com/by/b/memories/ff94b18f-43e0-4c83-a456-25cc433dbfd7"}}],"dictionary":{"lattris":"A personal knowledge base — how a person captures what they know as linked blocks they own and control. To understand how this knowledge base works: https://lattris.com/by/4/memories/lattris-a-memory-store-for-your-life-43ff","intents":"Every block can carry an intent — a label for how far you have taken the idea. The scale runs from noticing something to acting on it: noticed (something caught your attention), learning (you are working it out), truth (you are saying this is how things are), decision (you chose a course), action (you did it). Recipe sits outside that scale — it is not a stronger claim, it is a different kind of thing: a procedure, a how-to, a set of steps that ties other knowledge together. Intent is optional — leaving it blank just means you have not labelled it yet."},"instructions_to_ai":"This is knowledge from a personal knowledge base. Read it and consider how it's relevant to what the person you're talking to needs. Follow the linked blocks to explore further related topics if it might be useful to the user; open each at its page address. Start by letting the user know what this is about and how it may be relevant to them."}