autoSize属性控制着是否自动扩展高度, 默认为false, 此时使用原生textarea, 如果为true, 则使用react-textarea-autosize包提供的组件自动扩展高度.
autoSize属性为true时, minRows和maxRows属性控制着自动增长高度的限制. minRows默认为2行, maxRows默认为无限.autoSize属性未设置或为false时, minRows和maxRows属性会被忽略.resize属性控制着用户是否可以手动调整元素的高度. 取值与CSS的resize相同, 默认为"none"
下面的例子resize属性设置为了: "vertical", 这将调整尺寸约束到了垂直方向.
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| autosize | boolean | undefined | no | faslse | Determines whether the textarea height should grow with its content |
| color | string | undefined | no | ||
| description | React.ReactNode | no | Contents of <code>Input.Description</code> component. If not set, description is not rendered. | |
| descriptionProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Description</code> component | |
| disabled | boolean | undefined | no | Sets <code>disabled</code> attribute on the <code>input</code> element | |
| error | React.ReactNode | no | Determines whether the input should have error styles and <code>aria-invalid</code> attribute | |
| errorProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Error</code> component | |
| id | string | undefined | no | Static id used as base to generate <code>aria-</code> attributes, by default generates random id | |
| inputContainer | ((children: ReactNode) => ReactNode) | undefined | no | (children) => children | Input container component |
| inputWrapperOrder | ("input" | "label" | "error" | "description")[] | undefined | no | ['label', 'description', 'input', 'error'] | Controls order of the elements |
| label | React.ReactNode | no | Contents of <code>Input.Label</code> component. If not set, label is not rendered. | |
| labelElement | "div" | "label" | undefined | no | "label" | <code>Input.Label</code> root element |
| labelProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Label</code> component | |
| leftSection | React.ReactNode | no | Content section rendered on the left side of the input | |
| leftSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| leftSectionWidth | Width<string | number> | undefined | no | Left section width, used to set <code>width</code> of the section and input <code>padding-left</code>, by default equals to the input height | |
| maxRows | number | undefined | no | Maximum rows for autosize textarea to grow, ignored if <code>autosize</code> prop is not set | |
| minRows | number | undefined | no | Minimum rows of autosize textarea, ignored if <code>autosize</code> prop is not set | |
| multiline | boolean | undefined | no | false | Determines whether the input can have multiple lines, for example when <code>component="textarea"</code> |
| pointer | boolean | undefined | no | false | Determines whether the input should have <code>cursor: pointer</code> style |
| radius | string | undefined | no | "md" | Key of <code>theme.radius</code> or any valid CSS value to set <code>border-radius</code>, numbers are converted to rem |
| required | boolean | undefined | no | Sets <code>required</code> attribute on the <code>input</code> element | |
| resize | Resize | undefined | no | "none" | Controls <code>resize</code> CSS property |
| rightSection | React.ReactNode | no | Content section rendered on the right side of the input | |
| rightSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| rightSectionWidth | Width<string | number> | undefined | no | Right section width, used to set <code>width</code> of the section and input <code>padding-right</code>, by default equals to the input height | |
| size | string | undefined | no | "sm" | Controls input <code>height</code> and horizontal <code>padding</code> |
| slots | { left?: string | undefined; input?: string | undefined; right?: string | undefined; } | undefined | no | ||
| variant | "outline" | "default" | "ghost" | undefined | no | "outline" | input variant |
| withAria | boolean | undefined | no | true | Determines whether <code>aria-</code> and other accessibility attributes should be added to the input |
| withAsterisk | boolean | undefined | no | false | Determines whether the required asterisk should be displayed. Overrides <code>required</code> prop. Does not add required attribute to the input. |
| withErrorStyles | boolean | undefined | no | true | Determines whether the input should have red border and red text color when the <code>error</code> prop is set |
| wrapperProps | Record<string, any> | undefined | no | Props passed down to the root element of the <code>Input</code> component |