Tool: Astryx forms
What it does
- Ready-made React form controls from Meta's Astryx library.
- Each one comes with its label, description and error status built in.
When to reach for it
- A React 19 site needs forms that already handle labels, help text and errors.
- You need harder controls such as file upload, multi-select chips or a filter bar.
How to use it
- Install Astryx first. See Source: Astryx.
- Pick the control by the job:
TextInput for short text: names, emails, search.TextArea for longer text.NumberInput with min, max, steps and checks.Selector to choose one option from a list.MultiSelector, a checkbox dropdown for a known set.Typeahead, a search box with suggestions.Tokenizer, a searchable multi-select that shows choices as removable chips.CheckboxInput for one on/off choice, CheckboxList for a visible group, RadioList for one of several.Switch for settings that apply at once. If it needs a submit, use a checkbox.FileInput for one or many files, with drag and drop and checks on type, size and count.- Also
Slider, SegmentedControl, Calendar, SelectableCard.
Field wraps your own or third-party controls in the same label and error shell.InputGroup joins an input to a prefix or suffix inside one border.FormLayout places the fields but doesn't handle state or sending. Wrap it in a <form>.PowerSearch is a structured filter bar. For a simple search, use a text input.- Inputs are controlled: you pass
value and onChange.
- Look up any control's props with
npx @astryxdesign/cli component TextInput.
What happened when we used it
- Our build tried Astryx and found its form parts strong.
Source