diff --git a/README.md b/README.md
index 6a25917..b205647 100644
--- a/README.md
+++ b/README.md
@@ -35,7 +35,7 @@ Check out these demos:
- [`size`](#size--options-sm--md--lg--default-md)
- [`colorScheme`](#colorscheme)
- [`tagVariant`](#tagvariant--options-subtle--solid--outline--default-subtle)
- - [`isInvalid`](#isinvalid--default-false)
+ - [`isInvalid` / `isReadOnly`](#isinvalid--default-false--isreadonly---default-false)
- [`focusBorderColor` / `errorBorderColor`](#focusbordercolor--default-blue500--errorbordercolor--default-red500)
- [`useBasicStyles`](#usebasicstyles--default-false)
- [`selectedOptionStyle`](#selectedoptionstyle--options-color--check--default-color)
@@ -174,11 +174,11 @@ return (
[![CS-JS]](https://codesandbox.io/s/chakra-react-select-tag-variants-w31gnt?file=/example.js)
-#### `isInvalid` — Default: `false`
+#### `isInvalid` — Default: `false` | `isReadOnly` - Default: `false`
-You can pass `isInvalid` to the select component to style it like the Chakra `` is styled when it receives the same prop.
+You can pass `isInvalid` to the select component to style it like the Chakra `Input` is styled when it receives the same prop. Alternatively you can pass `isReadOnly` to make the component non-interactive in the same way Chakra's `Input` does.
-You can pass also pass `isInvalid` or `isDisabled` to a wrapping `` and it will output their corresponding `` on the select.
+You can pass also pass `isInvalid`, `isDisabled`, or `isReadOnly` into a wrapping `` to achieve the same result as passing these props into the `Select` component.
```js
return (
@@ -186,7 +186,11 @@ return (
{/* This will show up with a red border */}
- {/* This will show up with a red border, and grayed out */}
+ {/* This will show up normally but will not be interactive */}
+
+
+ {/* This will show up grayed out and will not be interactive */}
+ {/* Additionally, it will have a red border and the error message will be shown */}
Invalid & Disabled Select
diff --git a/src/chakra-components/control.tsx b/src/chakra-components/control.tsx
index ffe625c..8d4671f 100644
--- a/src/chakra-components/control.tsx
+++ b/src/chakra-components/control.tsx
@@ -34,6 +34,7 @@ const Control = <
selectProps: {
size,
isInvalid,
+ isReadOnly,
chakraStyles,
focusBorderColor,
errorBorderColor,
@@ -86,6 +87,7 @@ const Control = <
data-focus-visible={isFocused ? true : undefined}
data-invalid={isInvalid ? true : undefined}
data-disabled={isDisabled ? true : undefined}
+ aria-readonly={isReadOnly ? true : undefined}
>
{children}
@@ -179,7 +181,6 @@ export const DropdownIndicator = <
height: "100%",
borderRadius: 0,
borderWidth: 0,
- cursor: "pointer",
fontSize: iconSize,
...(useBasicStyles && {
background: "transparent",
diff --git a/src/chakra-components/input.tsx b/src/chakra-components/input.tsx
index 849fce7..f36694c 100644
--- a/src/chakra-components/input.tsx
+++ b/src/chakra-components/input.tsx
@@ -73,7 +73,7 @@ const Input = <
ref={innerRef}
sx={inputSx}
disabled={isDisabled}
- readOnly={isReadOnly}
+ readOnly={isReadOnly ? true : undefined}
aria-readonly={isReadOnly ? true : undefined}
aria-required={isRequired ? true : undefined}
{...innerProps}
diff --git a/src/module-augmentation.ts b/src/module-augmentation.ts
index 683d9b1..060cc4e 100644
--- a/src/module-augmentation.ts
+++ b/src/module-augmentation.ts
@@ -41,14 +41,17 @@ declare module "react-select/dist/declarations/src/Select" {
* If the `aria-invalid` prop is not passed, this prop will also set that
*
* @defaultValue `false`
- * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false}
+ * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false}
* @see {@link https://chakra-ui.com/docs/components/input/props}
+ * @see {@link https://chakra-ui.com/docs/components/form-control/props}
*/
isInvalid?: boolean;
/**
* If `true`, the form control will be `readonly`
*
+ * @defaultValue `false`
+ * @see {@link https://github.com/csandman/chakra-react-select#isinvalid--default-false--isreadonly---default-false}
* @see {@link https://chakra-ui.com/docs/components/input/props}
* @see {@link https://chakra-ui.com/docs/components/form-control/props}
*/
diff --git a/src/use-chakra-select-props.ts b/src/use-chakra-select-props.ts
index 67f940d..c47e036 100644
--- a/src/use-chakra-select-props.ts
+++ b/src/use-chakra-select-props.ts
@@ -27,6 +27,7 @@ const useChakraSelectProps = <
chakraStyles = {},
onFocus,
onBlur,
+ menuIsOpen,
...props
}: Props