Skip to content

Commit fc4c578

Browse files
committed
Tweak form provider examples in README
1 parent b797a81 commit fc4c578

File tree

1 file changed

+10
-10
lines changed

1 file changed

+10
-10
lines changed

README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -746,37 +746,37 @@ See this issue for some discussion about using this package with `react-hook-for
746746

747747
By default, `react-hook-form` uses [uncontrolled components](https://reactjs.org/docs/uncontrolled-components.html) to reduced input renders however this only works for native HTML inputs. Because chakra-react-select is not a native HTML input, you'll need to use react-hook-form's [`Controller`](https://react-hook-form.com/api/usecontroller/controller) component or [`useController`](https://react-hook-form.com/api/usecontroller) hook in order to keep the value(s) tracked in `react-hook-form`'s state. Here are some examples using each:
748748

749-
`Controller` multi select with built-in validation
749+
#### `Controller` multi select with built-in validation
750750

751751
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-v7llc?file=/example.js)
752752
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-controller-typescript-v8ps5?file=/app.tsx)
753753

754-
`useController` multi select with built-in validation
754+
#### `useController` multi select with built-in validation
755755

756756
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-n8wuf?file=/example.js)
757757
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-typescript-qcm23?file=/app.tsx)
758758

759-
`useController` single select
759+
#### `useController` single select
760760

761761
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-vanilla-js-11x4zk?file=/example.js)
762762
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-usecontroller-single-select-typescript-vylckh?file=/app.tsx)
763763

764-
Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
764+
#### Multi select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
765765

766766
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-tno8v?file=/src/app.js)
767767
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-yup-validation-typescript-n7slhu?file=/app.tsx)
768768

769-
Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
769+
#### Single select with [`yup`](https://github.com/jquense/yup) validation (advanced example)
770770

771771
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-y5kjc1?file=/src/app.js)
772772
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-yup-validation-typescript-phmv0u?file=/app.tsx)
773773

774-
Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
774+
#### Multi select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
775775

776776
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-cu0rku?file=/src/app.js)
777777
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-react-hook-form-with-zod-validation-typescript-5fyhfh?file=/app.tsx)
778778

779-
Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
779+
#### Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanced example)
780780

781781
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-jd588n?file=/src/app.js)
782782
[![CS-TS]](https://codesandbox.io/s/chakra-react-select-single-react-hook-form-with-zod-validation-typescript-m1dqme?file=/app.tsx)
@@ -785,17 +785,17 @@ Single select with [`zod`](https://github.com/colinhacks/zod) validation (advanc
785785

786786
See this issue for some discussion about using this package with `formik`: https://github.com/csandman/chakra-react-select/issues/23
787787

788-
Single select with built in validation
788+
#### Single select with built in validation
789789

790790
- Vanilla JS: _coming soon_
791791
- TypeScript: _coming soon_
792792

793-
Multi select with built in validation
793+
#### Multi select with built in validation
794794

795795
- Vanilla JS: _coming soon_
796796
- TypeScript: _coming soon_
797797

798-
Multi select with `yup` validation
798+
#### Multi select with `yup` validation
799799

800800
- Vanilla JS: _coming soon_
801801
- TypeScript: _coming soon_

0 commit comments

Comments
 (0)