@novem-ui/input v0.0.2-alpha.5

@novem-ui/input

Usage

<Input />

The component has the following props, plus SpacingProps and all the expected props from the native :

• baseColor (Optional): It can be any color from the theme, uses orange by default.
• error (Optional): It can be a boolean, a string or a new Error, just changes the color to red, doesnt show a message.
• valid (Optional): boolean.

import { Input, ThemeProvider } from '@novem-ui/core'
// or
import { Input } from '@novem-ui/input'
import { ThemeProvider } from '@novem-ui/theme'

function App() {
  return (
    <ThemeProvider>
      <Input type="number" />
    </ThemeProvider>
  )
}

<TextField />

The component has the following props, plus SpacingProps and all the expected props from the native :

• baseColor (Optional): It can be any color from the theme, uses orange by default.
• error (Optional): It can be a boolean, a string or a new Error.
• valid (Optional): boolean
• label (Optional): A string show as a label tied to the input.
• helper (Optional): A string show as a helper.
• count (Optional) A boolean to enable character count.
• readOnly (Optional) A boolean to set the input as read only (style is different from disabled).

import { TextField, ThemeProvider } from '@novem-ui/core'
// or
import { TextField } from '@novem-ui/input'
import { ThemeProvider } from '@novem-ui/theme'

function App() {
  return (
    <ThemeProvider>
      <Textfield value="A value" helper="Some helper text" />
    </ThemeProvider>
  )
}

<Dropdown />

The component has the following props, plus SpacingProps and all the expected props from the native :

• baseColor (Optional): It can be any color from the theme, uses orange by default.
• error (Optional): It can be a boolean, a string or a new Error.
• label (Optional): A string show as a label tied to the input.
• helper (Optional): A string show as a helper.
• readOnly (Optional) A boolean to set the input as read only (style is different from disabled).

import { Dropdown, Option, ThemeProvider } from '@novem-ui/core'
// or
import { Dropdown, Option } from '@novem-ui/input'
import { ThemeProvider } from '@novem-ui/theme'

function App() {
  return (
    <ThemeProvider>
        <Dropdown value="A value" helper="Some helper text">
          <Option value="1">
            Option 1
          </Option>
          <Option value="2">
            Option 2
          </Option>
        </Dropdown>
    </ThemeProvider>
  )
}