diff --git a/.yalc/nextra-renderlesskit-theme-docs/dist/index.js b/.yalc/nextra-renderlesskit-theme-docs/dist/index.js index a7a824e..5ad46a6 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/dist/index.js +++ b/.yalc/nextra-renderlesskit-theme-docs/dist/index.js @@ -325,7 +325,7 @@ var defaultTheme = { logo: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("span", { className: "mr-2 font-extrabold hidden md:inline" }, "Nextra"), /* @__PURE__ */ React2.createElement("span", { - className: "text-gray-600 font-normal hidden md:inline" + className: "text-slate-600 font-normal hidden md:inline" }, "The Next Docs Builder")), head: /* @__PURE__ */ React2.createElement(React2.Fragment, null, /* @__PURE__ */ React2.createElement("meta", { name: "msapplication-TileColor", @@ -876,7 +876,7 @@ var NextLink = ({ route, title, isRTL }) => { return /* @__PURE__ */ React7.createElement(Link2, { href: route }, /* @__PURE__ */ React7.createElement("a", { - className: cn("text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center", { "ml-2": !isRTL, "mr-2": isRTL }), + className: cn("text-lg font-medium p-4 -m-4 no-underline text-slate-600 hover:text-blue-600 flex items-center", { "ml-2": !isRTL, "mr-2": isRTL }), title }, title, /* @__PURE__ */ React7.createElement(arrow_right_default, { className: cn("transform inline flex-shrink-0", { @@ -889,7 +889,7 @@ var PrevLink = ({ route, title, isRTL }) => { return /* @__PURE__ */ React7.createElement(Link2, { href: route }, /* @__PURE__ */ React7.createElement("a", { - className: cn("text-lg font-medium p-4 -m-4 no-underline text-gray-600 hover:text-blue-600 flex items-center", { "mr-2": !isRTL, "ml-2": isRTL }), + className: cn("text-lg font-medium p-4 -m-4 no-underline text-slate-600 hover:text-blue-600 flex items-center", { "mr-2": !isRTL, "ml-2": isRTL }), title }, /* @__PURE__ */ React7.createElement(arrow_right_default, { className: cn("transform inline flex-shrink-0", { @@ -957,7 +957,7 @@ var Footer = ({ }, children, /* @__PURE__ */ React7.createElement("hr", null), config.footer ? /* @__PURE__ */ React7.createElement("div", { className: "mt-24 flex justify-between flex-col-reverse md:flex-row items-center md:items-end" }, /* @__PURE__ */ React7.createElement("span", { - className: "text-gray-600" + className: "text-slate-600" }, render_component_default(config.footerText, { locale })), /* @__PURE__ */ React7.createElement("div", { className: "mt-6" }), config.footerEditLink ? /* @__PURE__ */ React7.createElement(EditPageLink, { @@ -1067,16 +1067,16 @@ function LocaleSwitch({ options, isRTL }) { })), /* @__PURE__ */ React11.createElement("span", { className: "sr-only" }, "Languages")), mounted ? /* @__PURE__ */ React11.createElement("ul", { - className: cn2("locale-dropdown absolute block bg-white dark:bg-dark border dark:border-gray-700 py-1 rounded shadow-lg", { "right-0": !isRTL, "left-0": isRTL }) + className: cn2("locale-dropdown absolute block bg-white dark:bg-dark border dark:border-slate-700 py-1 rounded shadow-lg", { "right-0": !isRTL, "left-0": isRTL }) }, Array.isArray(options) && options.map((l) => /* @__PURE__ */ React11.createElement("li", { key: l.locale }, /* @__PURE__ */ React11.createElement(Link3, { href: asPath, locale: l.locale }, /* @__PURE__ */ React11.createElement("a", { - className: cn2("block no-underline text-current py-2 px-4 hover:bg-gray-200 dark:hover:bg-gray-800 whitespace-nowrap", { + className: cn2("block no-underline text-current py-2 px-4 hover:bg-slate-200 dark:hover:bg-slate-800 whitespace-nowrap", { "font-semibold": locale === l.locale, - "bg-gray-100 dark:bg-gray-900": locale === l.locale + "bg-slate-100 dark:bg-slate-900": locale === l.locale }) }, l.text))))) : null); } @@ -1182,7 +1182,7 @@ var Search = ({ directories = [] }) => { }), show ? null : /* @__PURE__ */ React12.createElement("div", { className: "hidden sm:flex absolute inset-y-0 right-0 py-1.5 pr-1.5" }, /* @__PURE__ */ React12.createElement("kbd", { - className: "inline-flex items-center px-2 font-sans text-sm font-medium text-gray-400 dark:text-gray-800 dark:border-gray-800 border rounded" + className: "inline-flex items-center px-2 font-sans text-sm font-medium text-slate-400 dark:text-slate-800 dark:border-slate-800 border rounded" }, "/"))), renderList && /* @__PURE__ */ React12.createElement("ul", { className: "absolute left-0 z-20 w-full p-0 m-0 mt-1 list-none border divide-y rounded shadow-md md:right-0 top-100 md:w-auto" }, results.map((res, i) => { @@ -1242,7 +1242,7 @@ var Item2 = ({ title, active, href, onMouseOver, excerpt }) => { }, /* @__PURE__ */ React13.createElement("span", { className: "font-semibold" }, title), excerpt ? /* @__PURE__ */ React13.createElement("div", { - className: "text-gray-600" + className: "text-slate-600" }, /* @__PURE__ */ React13.createElement(TextWithHighlights, { content: excerpt.text, ranges: excerpt.highlight_ranges @@ -1368,7 +1368,7 @@ function Search2() { }), show ? null : /* @__PURE__ */ React13.createElement("div", { className: "hidden sm:flex absolute inset-y-0 right-0 py-1.5 pr-1.5" }, /* @__PURE__ */ React13.createElement("kbd", { - className: "inline-flex items-center px-2 font-sans text-sm font-medium text-gray-400 dark:text-gray-800 dark:border-gray-800 border rounded" + className: "inline-flex items-center px-2 font-sans text-sm font-medium text-slate-400 dark:text-slate-800 dark:border-slate-800 border rounded" }, "/"))), renderList && /* @__PURE__ */ React13.createElement("ul", { className: "absolute z-20 p-0 m-0 mt-1 divide-y top-full" }, results.map((res, i) => { @@ -1450,7 +1450,7 @@ function Navbar({ const activeRoute = getFSRoute(asPath, locale).split("#")[0]; const { menu, setMenu } = useMenuContext(); return /* @__PURE__ */ React15.createElement("nav", { - className: "flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b border-gray-200 px-6 dark:bg-dark dark:border-gray-900 bg-opacity-[.97] dark:bg-opacity-100" + className: "flex items-center bg-white z-20 fixed top-0 left-0 right-0 h-16 border-b border-slate-200 px-6 dark:bg-dark dark:border-slate-900 bg-opacity-[.97] dark:bg-opacity-100" }, /* @__PURE__ */ React15.createElement("div", { className: "w-full flex items-center mr-2" }, /* @__PURE__ */ React15.createElement(Link6, { @@ -1469,7 +1469,7 @@ function Navbar({ href, key: page.route }, /* @__PURE__ */ React15.createElement("a", { - className: cn5("no-underline whitespace-nowrap mr-4 hidden md:inline-block", page.route === activeRoute || activeRoute.startsWith(page.route + "/") ? "text-current" : "text-gray-500") + className: cn5("no-underline whitespace-nowrap mr-4 hidden md:inline-block", page.route === activeRoute || activeRoute.startsWith(page.route + "/") ? "text-current" : "text-slate-500") }, page.title)); }) : null, /* @__PURE__ */ React15.createElement("div", { className: "flex-1" @@ -1662,7 +1662,7 @@ function Sidebar({ height: "calc(100vh - 4rem)" } }, /* @__PURE__ */ React16.createElement("div", { - className: "sidebar border-gray-200 dark:border-gray-900 w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto" + className: "sidebar border-slate-200 dark:border-slate-900 w-full p-4 pb-40 md:pb-16 h-full overflow-y-auto" }, /* @__PURE__ */ React16.createElement("div", { className: "mb-4 block md:hidden" }, config.customSearch || (config.search ? config.unstable_stork ? /* @__PURE__ */ React16.createElement(Search2, null) : /* @__PURE__ */ React16.createElement(search_default, { @@ -1716,7 +1716,7 @@ function ToC({ style: indent(heading.depth) }, /* @__PURE__ */ React17.createElement("a", { href: `#${slug}`, - className: cn7("no-underline hover:text-gray-900 dark:hover:text-gray-100", state && state.isActive ? "text-gray-900 dark:text-gray-100 font-semibold" : "text-gray-600") + className: cn7("no-underline hover:text-slate-900 dark:hover:text-slate-100", state && state.isActive ? "text-slate-900 dark:text-slate-100 font-semibold" : "text-slate-600") }, text)); })) : null); } diff --git a/.yalc/nextra-renderlesskit-theme-docs/package.json b/.yalc/nextra-renderlesskit-theme-docs/package.json index 2b0929a..5d35f71 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/package.json +++ b/.yalc/nextra-renderlesskit-theme-docs/package.json @@ -94,5 +94,5 @@ "emoji": "emoji", "editor": false }, - "yalcSig": "ce299f7b490219a9f2f1eb4999c0c447" + "yalcSig": "ecdf36723a243c305d9261fd73b2c6b3" } diff --git a/.yalc/nextra-renderlesskit-theme-docs/style.css b/.yalc/nextra-renderlesskit-theme-docs/style.css index e69a411..c409621 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/style.css +++ b/.yalc/nextra-renderlesskit-theme-docs/style.css @@ -1,4 +1,6 @@ @tailwind base; +@tailwind components; +@tailwind utilities; html { @apply subpixel-antialiased; @@ -10,7 +12,7 @@ body { @apply bg-white; } .dark body { - @apply bg-dark text-gray-100; + @apply bg-dark text-slate-100; } h1 { @@ -21,7 +23,7 @@ h2 { @apply pb-1 border-b; } .dark h2 { - @apply border-gray-900; + @apply border-slate-900; } h3 { @apply text-2xl font-semibold tracking-tight mt-8; @@ -51,18 +53,18 @@ hr { @apply my-8; } .dark hr { - @apply border-gray-900; + @apply border-slate-900; } code { - @apply text-gray-800 bg-gray-500 bg-opacity-25 rounded; + @apply text-slate-800 bg-slate-500 bg-opacity-25 rounded; box-decoration-break: clone; } .dark code { - @apply text-gray-300 bg-gray-800; + @apply text-slate-300 bg-slate-800; } pre { - @apply p-4 bg-gray-200 rounded-lg mt-6 mb-4 overflow-x-auto; - @apply dark:bg-gray-800; + @apply p-4 bg-slate-200 rounded-lg mt-6 mb-4 overflow-x-auto; + @apply dark:bg-slate-800; } pre code { @apply p-0 text-sm text-black bg-transparent rounded-none inline-block min-w-full; @@ -71,9 +73,6 @@ a code { @apply text-current no-underline; } -@tailwind components; -@tailwind utilities; - .main-container { min-height: 100vh; } @@ -89,31 +88,31 @@ a code { @apply ring; } .sidebar .active-anchor { - @apply font-semibold text-gray-900 dark:text-white; + @apply font-semibold text-slate-900 dark:text-white; } .sidebar li.active > a { - @apply font-semibold text-black bg-gray-200; + @apply font-semibold text-black bg-slate-200; } .dark .sidebar li.active > a { - @apply text-white bg-gray-800; + @apply text-white bg-slate-800; } .sidebar button, .sidebar a { - @apply block w-full text-left text-base no-underline text-gray-600 mt-1 p-2 rounded select-none outline-none; + @apply block w-full text-left text-base no-underline text-slate-600 mt-1 p-2 rounded select-none outline-none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } .dark .sidebar button, .dark .sidebar a { - @apply text-gray-500; + @apply text-slate-500; } .sidebar a:hover, .sidebar button:hover { - @apply text-gray-900 bg-gray-100; + @apply text-slate-900 bg-slate-100; } .dark .sidebar a:hover, .dark .sidebar button:hover { - @apply text-white bg-gray-900; + @apply text-white bg-slate-900; } article ul { @apply list-disc ml-6 mt-6; @@ -125,8 +124,8 @@ article ol { @apply list-decimal ml-6 mt-6; } article blockquote { - @apply italic pl-6 border-l-2 border-gray-300 text-gray-700; - @apply dark:border-gray-700 dark:text-gray-400; + @apply italic pl-6 border-l-2 border-slate-300 text-slate-700; + @apply dark:border-slate-700 dark:text-slate-400; } .subheading-anchor { @@ -141,10 +140,10 @@ article blockquote { } .anchor-icon { opacity: 0; - @apply ml-2 text-gray-500 select-none; + @apply ml-2 text-slate-500 select-none; } .dark .anchor-icon { - @apply text-gray-700; + @apply text-slate-700; } h2 a { @@ -166,36 +165,36 @@ h2 a { /* Search */ .nextra-search input { - @apply border-gray-300 text-gray-900; + @apply border-slate-300 text-slate-900; } .dark .nextra-search input { - @apply bg-dark border-gray-800 text-gray-100; + @apply bg-dark border-slate-800 text-slate-100; } .nextra-search input::placeholder { - @apply text-gray-400; + @apply text-slate-400; } .dark .nextra-search input::placeholder { - @apply text-gray-700; + @apply text-slate-700; } .nextra-search ul { - @apply rounded border bg-white text-gray-100 border-gray-300 divide-gray-300 overflow-hidden shadow-lg list-none; + @apply rounded border bg-white text-slate-100 border-slate-300 divide-slate-300 overflow-hidden shadow-lg list-none; } .dark .nextra-search ul { - @apply bg-dark text-gray-100 border-gray-700 divide-gray-700; + @apply bg-dark text-slate-100 border-slate-700 divide-slate-700; } .nextra-search ul li { - @apply text-gray-800; + @apply text-slate-800; } .nextra-search ul li.active, .nextra-search ul a:focus li { - @apply bg-gray-200; + @apply bg-slate-200; } .dark .nextra-search ul li { - @apply text-gray-300; + @apply text-slate-300; } .dark .nextra-search ul li.active, .dark .nextra-search ul a:focus li { - @apply bg-gray-800; + @apply bg-slate-800; } .nextra-search ul li .highlight { @apply bg-yellow-300; @@ -259,12 +258,12 @@ table { @apply p-0; } table tr { - @apply m-0 p-0 border-t border-gray-300; - @apply dark:border-gray-700; + @apply m-0 p-0 border-t border-slate-300; + @apply dark:border-slate-700; } table tr:nth-child(2n) { - @apply bg-gray-100; - @apply dark:bg-gray-900; + @apply bg-slate-100; + @apply dark:bg-slate-900; } table tr th { @apply font-semibold; @@ -280,8 +279,8 @@ table tr td[align="right"] { table tr th, table tr td { @apply text-left; - @apply m-0 px-4 py-2 border border-gray-300; - @apply dark:border-gray-700; + @apply m-0 px-4 py-2 border border-slate-300; + @apply dark:border-slate-700; } .table-container { overflow: auto; @@ -301,6 +300,11 @@ pre .prism-code { .dark pre .prism-code { --c-highlight: #3d4b61; } + +pre .prism-code .token-line { + line-height: 150%; +} + pre .prism-code .token.plain, pre .prism-code .token.builtin, pre .prism-code .token.char, diff --git a/.yalc/nextra-renderlesskit-theme-docs/yalc.sig b/.yalc/nextra-renderlesskit-theme-docs/yalc.sig index b2e6a3d..982475f 100644 --- a/.yalc/nextra-renderlesskit-theme-docs/yalc.sig +++ b/.yalc/nextra-renderlesskit-theme-docs/yalc.sig @@ -1 +1 @@ -ce299f7b490219a9f2f1eb4999c0c447 \ No newline at end of file +ecdf36723a243c305d9261fd73b2c6b3 \ No newline at end of file diff --git a/components/ComponentLinks.tsx b/components/ComponentLinks.tsx index 355516b..1ea01ab 100644 --- a/components/ComponentLinks.tsx +++ b/components/ComponentLinks.tsx @@ -21,7 +21,7 @@ const ComponentLinks: React.FC = ({ "https://renderlesskit-react-tailwind.vercel.app/?path=/story/"; return ( - + {github && ( + + )} + + + {!!defaultValue ? ( + {defaultValue} + ) : ( + "-" + )} + + + ), + )} + + + ); +}; + +export default PropsTable; diff --git a/package.json b/package.json index 50c2f8a..713df49 100644 --- a/package.json +++ b/package.json @@ -68,12 +68,11 @@ "next": "12.0.7", "nextra": "link:.yalc/nextra", "nextra-renderlesskit-theme-docs": "link:.yalc/nextra-renderlesskit-theme-docs", - "nextra-theme-docs": "2.0.0-beta.5", "react": "17.0.2", "react-dom": "17.0.2" }, "devDependencies": { - "@babel/core": "7.16.5", + "@babel/core": "7.16.7", "@commitlint/cli": "16.0.1", "@commitlint/config-conventional": "16.0.0", "@next/eslint-plugin-next": "12.0.7", @@ -82,15 +81,15 @@ "@testing-library/jest-dom": "5.16.1", "@testing-library/react": "12.1.2", "@testing-library/user-event": "13.5.0", - "@types/jest": "27.0.3", + "@types/jest": "27.4.0", "@types/lodash": "4.14.178", - "@types/node": "17.0.5", + "@types/node": "17.0.6", "@types/react": "17.0.38", "@types/react-dom": "17.0.11", "all-contributors-cli": "6.20.0", - "autoprefixer": "10.4.0", + "autoprefixer": "10.4.1", "babel-jest": "27.4.5", - "eslint": "8.5.0", + "eslint": "8.6.0", "eslint-config-prettier": "8.3.0", "eslint-config-react-app": "7.0.0", "eslint-plugin-prettier": "4.0.0", @@ -98,7 +97,7 @@ "gacp": "2.10.2", "husky": "7.0.4", "jest": "27.4.5", - "lint-staged": "12.1.4", + "lint-staged": "12.1.5", "postcss": "8.4.5", "prettier": "2.5.1", "react-icons": "4.3.1", diff --git a/pages/_app.tsx b/pages/_app.tsx index 9e9ae98..a0e9473 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,7 +2,7 @@ import { RenderlesskitProvider } from "@renderlesskit/react-tailwind"; import type { AppProps } from "next/app"; import "@/styles/global.css"; -import "nextra-theme-docs/style.css"; +import "nextra-renderlesskit-theme-docs/style.css"; export default function MyApp({ Component, pageProps }: AppProps) { return ( diff --git a/pages/docs/components/feedback/meta.json b/pages/docs/components/feedback/meta.json index 81fcfbf..9e2c7c9 100644 --- a/pages/docs/components/feedback/meta.json +++ b/pages/docs/components/feedback/meta.json @@ -1,5 +1,5 @@ { + "spinner": "Spinner", "progress": "Progress", - "circular-progress": "CircularProgress", - "spinner": "Spinner" + "circular-progress": "CircularProgress" } diff --git a/pages/docs/components/forms/form-field.mdx b/pages/docs/components/forms/form-field.mdx deleted file mode 100644 index 63695ab..0000000 --- a/pages/docs/components/forms/form-field.mdx +++ /dev/null @@ -1,203 +0,0 @@ -import ComponentLinks from "@/components/ComponentLinks"; -import Callout from "nextra-theme-docs/callout"; - -# FormField - -FormField provides a cohesive way render form element's states such as -isInvalid, isDisabled, and isRequired. - - - -## Imports - -```js -import { - FormField, - FormLabel, - FormErrorText, - FormHelperText, - FormLabelValue, - FormRequiredText, - useFormControl, -} from "@renderlesskit/react-tailwind"; -``` - -- **FormField** - main wrapper context -- **FormLabel** - field's label -- **FormLabelValue** - renders form element's value -- **FormHelperText** - renders helper text -- **FormErrorText** - renders error text when FormField has `isInvalid` set to - true -- **FormRequiredText** - renders when FormField has `isRequired` set to true -- **useFormControl** - context hook to glue external form elements with - FormField's context. - -## Usage - -All the form elements of renderlesskit are compatible with `FormField`, thus you -can directly use any of the elements inside of FormField and it will -automatically handle all the accessibility & props. - -Basic usage. - -```jsx live - - Enter email address - - Hint text - Email is invalid - -``` - -## Required form fields - -By passing the `isRequired` prop, the Input field will have `aria-required` set -to true, and the `FormRequiredText` will be shown. - -```jsx live - - - Enter email address - Required - - - Hint text - -``` - -## Usage with Radios - -```jsx live - - Favorite Browser - - Chrome - FireFox - Safari - - Select which browser you use. - -``` - -## Usage with Switch - -```jsx live - - Enable darkmode? - - - - Switch darkmode - - -``` - -## Usage with slider - -Let's take a look at how we can use the `Slider` component with FormField: - -First thing you might notice is that we can access the internal state of the -`FormField` via render props. And we are also utilizing the `FormLabelValue` to -render the current value of the Slider. - -```jsx noInline live -const SliderExample = () => { - const [value, setValue] = React.useState(0); - - return ( - 60}> - {({ isInvalid }) => ( - <> - - Slider value - {value} - - setValue(v[0])} /> - {!isInvalid && Hint text} - Value is above 60 - - )} - - ); -}; - -export default SliderExample; -``` - -## Using custom inputs - -All the form elements of renderlesskit are compatible with `FromField` but you -might want to use your own input element or any other external input elements. -For these situations we provide two ways to bind your custom input elements to -FormField. - -### Method #1 (render props) - -Via the render props API, we expose the a variable called `inputProps` which -holds all the aria related props which can be directly spread into the input. - -```jsx live - - {({ inputProps }) => ( - <> - Custom input example - - Hint text - - )} - -``` - -### Method #2 (useFormControl hook) - -`useFormControl` provides a much cleaner way to bind a custom input to -FormField, all the renderlesskit form elements internally uses this hook too. - -```jsx noInline live -const MyInput = ({ disabled, readOnly, isInvalid, ...props }) => { - const fieldInputProps = useFormControl({ - ...props, - isDisabled: disabled, - isReadOnly: readOnly, - isInvalid: isInvalid, - }); - - return ; -}; - -export default () => ( - - Custom input with hook - - Hint text - , -); -``` - -## Integrations - -### React Hook Form - -This example shows how to integrate renderlesskit Input with react-hook-form - -[Explore on CodeSandbox](https://codesandbox.io/s/renderlesskit-react-hook-form-rw5c5?file=/src/App.js) - -### Formik - -This example shows how to integrate renderlesskit Input with Formik - -[Explore on CodeSandbox](https://codesandbox.io/s/renderlesskit-formik-k1k9w) diff --git a/pages/docs/components/forms/meta.json b/pages/docs/components/forms/meta.json index 2d28a50..e288b61 100644 --- a/pages/docs/components/forms/meta.json +++ b/pages/docs/components/forms/meta.json @@ -1,9 +1,9 @@ { - "input": "Input", - "form-field": "FormField", - "checkbox": "Checkbox", "radio": "Radio", + "checkbox": "Checkbox", "switch": "Switch", "slider": "Slider", + "input": "Input", + "select": "Select", "textarea": "Textarea" } diff --git a/pages/docs/components/forms/select.mdx b/pages/docs/components/forms/select.mdx new file mode 100644 index 0000000..f0002ad --- /dev/null +++ b/pages/docs/components/forms/select.mdx @@ -0,0 +1,164 @@ +import ComponentLinks from "@/components/ComponentLinks"; +import Callout from "nextra-theme-docs/callout"; + +# Input + + + +## Imports + +```js +import { + Input, + InputGroup, + InputPrefix, + InputSuffix, + InputGroupSuffix, + InputGroupPrefix, +} from "@renderlesskit/react-tailwind"; +``` + +- **Input** - main input component +- **InputGroup** - input group is a wrapper to hold InputGroupPrefix/Suffix +- **InputPrefix** - prefix of the input element +- **InputSuffix** - suffix of the input element +- **InputGroupSuffix** - prefix of the input group +- **InputGroupPrefix** - suffix of the input group + +## Input Prefix/Suffix + +You can append or prepend any element inside input. By default we don't give +spacing to the elements so you have to add spacing as needed. + +`InputPrefix` is positioned absolutely within the input. + +```jsx live + + https:// + .com + +``` + +As you can see clicking on the input's prefix/suffix will focus the input, but +that might not what you want in all scenarios if you want to render a button or +something interactive. To disable this behaviour you can use +`allowPointerEvents` + +For example if you want to add a select inside the suffix you can do so like +this: + +```jsx live + + https:// + + + + +``` + +## InputGroup + +`InputGroup` is used to add addons before or after the `Input` component. + +And by using `InputGroupPrefix` we can specify the prefix or suffix. + +The main difference between InputGroupPrefix & InputPrefix is that: + +- `InputPrefix` is positioned absolutely within the input. +- `InputGroupPrefix` is positioned adjacent to the input. + +```jsx live + + + + + +``` + +Unlike `InputPrefix` where you had to add `allowPointerEvents` to make the +`InputGroupPrefix` interactive, in InputGroupPrefix you can directly pass any +interactive components (eg: Button). + +Here's a password input example using InputGroupSuffix to attach a toggle +button. + +```jsx noInline live +const PasswordExample = () => { + const [show, setShow] = React.useState(false); + const toggle = () => setShow(!show); + + return ( + + + + + + + ); +}; + +export default PasswordExample; +``` + +Here's an example with all the components combined: + +```jsx noInline live +const InputButton = props => { + return ( +