Input

Input component is used to get the user input in a text field.

Usage

import { Input } from '@elegantui/forms';

Basic Example

import { Input } from '@elegantui/forms';

export default function App() {
  return <Input name='default' label='Input' placeholder='Enter text' />;
}

Variants

Input component is available in six variants.

import { Input } from '@elegantui/forms';

export default function App() {
  return (
    <Input
      name='primary'
      label='Primary'
      placeholder='primary variant'
      variant='primary' // 'default' | 'secondary' | 'success' | 'warning' | 'error'
    />
  );
}

Label

Input component renders a label for accessibility purposes. The value for the label can be provided using the label prop. If you would like to hide the label but still keep it accessible to screen readers you can pass a hideLabel prop.

import { Input } from '@elegantui/forms';

export default function App() {
  return (
    <Input
      name='primary'
      placeholder='primary variant'
      variant='primary'
      label='Primary'
      hideLabel
    />
  );
}

Disabled state

Input component can be configured to have a disabled state by using the disabled prop.

import { Input } from '@elegantui/forms';

export default function App() {
  return (
    <Input
      name='primary'
      placeholder='primary variant'
      variant='primary'
      label='Primary'
      disabled
    />
  );
}

Custom styles

Input component allows you to configure your own styles. Styles can be provided either through the React style prop or CSS classes using className prop.

import { Input } from '@elegantui/forms';

export default function App() {
  return (
    <Input
      name='primary'
      placeholder='primary variant'
      variant='primary'
      label='Primary'
      style={{
        backgroundColor: 'aliceblue',
        color: 'black'
      }}
    />
  );
}

Available Props