## Feature Examples
### Size
- description: Adjust the size of the input using the `size` prop. It supports 3 sizes: - For most common cases, use the default `medium.` - To emphasize specific inputs in onboarding flows, use `large`. - Use `small` for more dense and compact layouts.
- example:
```jsx
;
```
### Menu arrow
- description: Use `menuArrow` prop to change InputShell to look like a Dropdown.
- example:
```jsx
;
```
### Disabled
- description: `disabled` removes all interactions and creates a disabled input state. Use it to highlight functions that are unavailable.
- example:
```jsx
Disabled;
```
### Render as
- description: `` can be rendered as `div` or as `button`
- example:
```jsx
;
```
## Developer Examples
### Masked InputShell using use-mask-input
- description: _Requires use of external package. In this example `use-mask-input` package is used._
- example:
```jsx
() => {
const { withMask } = require('use-mask-input');
const maskRef = React.useMemo(
() =>
withMask('99 / 99', {
placeholder: '_',
showMaskOnHover: false,
}),
[],
);
return (
);
};
```
## Common Use Case Examples
### Border style
- description: To show border style in the dropdown you can use `` as a `div` and use css or even an svg to create such designs.
- example:
```jsx
() => {
const [opacity, setOpacity] = React.useState(50);
return (
{}} skin="floating" width="288px">
);
};
```