InputField

InputField description.

Props

InputField properties

Property	Description	Type	Default
helperText	Input helper text	`string`	-
inline	Should input be inline?	`boolean`	false
label	Input label text	`string`	-
name	Input name	`string`	-
placeholder	Input placeholder text	`string`	-
required	Is input required?	`boolean`	false
type	What input type is it?	`number` `text` `email` `password`	`text`

Usage

Basic Input

import { InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <InputField placeholder="Type something here" />
  </BrowserWindow>
);

import { InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <InputField placeholder="Type something here" />
  </BrowserWindow>
);

Block

import { Box, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <InputField label="First Name" />
      <InputField label="Last Name" />
    </Box>
  </BrowserWindow>
);

import { Box, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Box>
      <InputField label="First Name" />
      <InputField label="Last Name" />
    </Box>
  </BrowserWindow>
);

Inline

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField inline label="First Name" />
      <InputField inline label="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField inline label="First Name" />
      <InputField inline label="Last Name" />
    </Flex>
  </BrowserWindow>
);

Helper Text

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField
        label="Email Address"
        type="email"
        helperText="example@gmail.com"
      />
      <InputField
        label="Password"
        type="password"
        helperText="must contain special characters"
      />
    </Flex>
  </BrowserWindow>
);

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField
        label="Email Address"
        type="email"
        helperText="example@gmail.com"
      />
      <InputField
        label="Password"
        type="password"
        helperText="must contain special characters"
      />
    </Flex>
  </BrowserWindow>
);

Required

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField required label="First Name" />
      <InputField required label="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField required label="First Name" />
      <InputField required label="Last Name" />
    </Flex>
  </BrowserWindow>
);

Hidden Label

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField required placeholder="First Name" />
      <InputField required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField required placeholder="First Name" />
      <InputField required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

Disabled

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField disabled required placeholder="First Name" />
      <InputField disabled required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);

import { Flex, InputField, BrowserWindow } from 'camara';

render(
  <BrowserWindow docs>
    <Flex>
      <InputField disabled required placeholder="First Name" />
      <InputField disabled required placeholder="Last Name" />
    </Flex>
  </BrowserWindow>
);