← ClaudeAtlas

platform-blocks-formslisted

Build forms with the @platform-blocks/ui React Native library. Use when composing form screens with Form/Form.Field/Form.Input/Form.Submit or FormLayout/ControlField, wiring input components (Input, PasswordInput, TextArea, NumberInput, Select, AutoComplete, Checkbox, Switch, RadioGroup, SegmentedControl, Slider, PinInput, PhoneInput, DatePickerInput, TimePickerInput, ColorInput, FileInput), implementing validation (validationSchema, validationRules, validateValue, on-submit/on-blur with React state), choosing controlled vs uncontrolled inputs (value/onChangeText vs onChange, defaultValue/defaultChecked), or handling keyboards (KeyboardAwareLayout, KeyboardManagerProvider) and form accessibility.
platform-blocks/skills · ★ 0 · Web & Frontend · score 70
Install: claude install-skill platform-blocks/skills
# Platform Blocks Forms Form building with `@platform-blocks/ui` for React Native (iOS/Android/Web). Everything below imports from the package root unless noted: ```tsx import { Form, Input, Select, Checkbox, Button, KeyboardAwareLayout } from '@platform-blocks/ui'; ``` Four reference files sit alongside this one: - `references/api.md` — the curated API: how the pieces compose, the union types, the defaults that bite. **Read this first.** - `references/props.md` — generated, exhaustive prop tables for every component in this skill. Look here for the complete surface of a single prop. - `references/icons.md` — generated, every `name` the built-in `Icon` registry accepts. Check it before writing `<Icon name="…">`; unlisted names render nothing. - `references/patterns.md` — complete copy-paste screens. ## The form model — two valid approaches **1. Plain React state (recommended default).** Every input is a controlled component. Hold values and errors in `useState`, validate on submit and/or blur, pass `error` strings back into the inputs. This works uniformly across all control types. **2. Built-in `Form` compound.** `Form` is a real (but thin) state container: a context provider (`FormProvider`) holding `values`, `errors`, `touched`, `isSubmitting`, plus a plain `<View>`. It is geared toward **text inputs** — its field binding speaks `value`/`onChangeText`/`onBlur`. ```tsx <Form initialValues={{ email: '' }} validationSchema={{ email: [ { type: 'required