Project Status
--------------
[](https://www.npmjs.com/package/react-input-material)
[](https://www.npmjs.com/package/react-input-material)
[](https://github.com/thaibault/react-input-material/actions/workflows/build.yaml)
[](https://github.com/thaibault/react-input-material/actions/workflows/build-package-and-push.yaml)
[](https://github.com/thaibault/react-input-material/actions/workflows/check-types.yaml)
[](https://github.com/thaibault/react-input-material/actions/workflows/lint.yaml)
[](https://github.com/thaibault/react-input-material/actions/workflows/test-coverage-report.yaml)
[](https://coveralls.io/github/thaibault/react-input-material)
[](https://github.com/thaibault/react-input-material/actions/workflows/deploy-web-documentation.yaml)
[](https://torben.website/react-input-material)
Use case
--------
Reusable material design based input field with support for (richt-)text, code,
selections, numbers, dates and so on.
Content
Installation
------------
You can install via package manager or simply download the compiled version as
zip file here and inject:
```bash
npm install react-input-material
```
```TypeScript
import {
TextInput, FileInput, Checkbox, Inputs, Interval
} from 'react-input-material'
// ...
```
Examples
--------
### Simple uncontrolled input
```TypeScript
const Application = () =>
name="simpleInput"
onChange={({value, invalid}) => {
console.log('Set value', value)
if (invalid)
console.log('Value is invalid!')
}}
/>
```
### Simple controlled one
```TypeScript
const Application = () => {
const [value, setValue] = useState(null)
return
name = "simpleInputControlled"
onChangeValue = {setValue}
value = {value}
/>
}
```
### Number example
```TypeScript
const Application = () =>
declaration="Number"
description="Place a number please."
name="number"
placeholder="100000"
maximum={200000}
minimum={10}
required
type="number"
/>
```
### Code editor example
```TypeScript
const Application = () =>
className="text-input--code-editor"
editor="code(js)"
rows={6}
initialValue="const value = 2"
/>
```
### Complex rich text input
```TypeScript
const Application = () =>
className="text-input--richtext-editor"
declaration="richtext"
description="Please your styled text here."
name="RichText"
placeholder="Hello Mr. Smith,
this is a Placeholder."
editor="richtext"
rows={6}
selectableEditor
initialValue="Hello Mr. Smith,
how are you?"
minimumLength={10}
maximumLength={100}
required
onChangeValue={(value) => {
console.log('Current value is', value)
}}
/>
```
### Universal Date input
```TypeScript
const Application = () =>
default={
new Date('2025-01-01T00:00:00.000Z')
.getTime() / 1000
}
name="timeInput"
type="date"
/>
```
### Local date input
```TypeScript
const Application = () =>
default="2025-01-01T23:00:00.000Z"
name="timeInput"
type="date-local"
/>
```
### Select an input
```TypeScript
const Application = () =>
declaration="Selection Example"
name="Example selection"
selection={['A', 'B', 'C']}
/>
```
### Select an input with mapped labels
```TypeScript
const Application = () =>
name="Another selection example"
required
selection={[
{value: 'A', label: 'a'},
{value: 'B', label: 'b'},
{value: 'C', label: 'c'}
]}
/>
```
### You can select and upload files
```TypeScript
const Application = () =>
```
### Checkbox
```TypeScript
const Application = () =>
```
### List of any inputs are possible
```TypeScript
const Application = () =>
name="checkboxInputs"
default={[{
type: 'boolean',
value: false,
required: true,
showInitialValidationState: true
}]}
createItem={useMemorizedValue(({
index, item, properties: {name}
}: CreateItemOptions<
boolean | null,
CheckboxProps,
InputsProperties
>): CheckboxProps => ({
...item,
name: `${name}-${String(index + 1)}`
}))}
maximumNumber={2}
minimumNumber={2}
showInitialValidationState
>
{({properties}) => }
```
### Interval
```TypeScript
const Application = () =>
```