Castle UI provides visual components to help you build forms in an extensible way.

Usage

Import

import {
  FormControl,
  FormLabel,
  FormHint,
  FormError,
  Input,
} from '@passfort/castle'
content_copy
Copy

Basic Field

<FormControl isRequired>
  <FormLabel>Name</FormLabel>
  <Input />
  <FormHint>Your legal name</FormHint>
</FormControl>
<FormControl isRequired>
  <FormLabel>Name</FormLabel>
  <Input />
  <FormHint>Your legal name</FormHint>
</FormControl>
content_copy
Copy
live example

Invalid

<FormControl isInvalid isRequired>
  <FormLabel>Name</FormLabel>
  <Input value={1} />
  <FormError>Name cannot be a number.</FormError>
</FormControl>
<FormControl isInvalid isRequired>
  <FormLabel>Name</FormLabel>
  <Input value={1} />
  <FormError>Name cannot be a number.</FormError>
</FormControl>
content_copy
Copy
live example

Input Group

Useful for connecting two inputs together. Use the flex property to adjust the sizes of different inputs.

import { InputGroup } from '@passfort/castle'
content_copy
Copy

<InputGroup>
  <Input flex={3} value={1} />
  <HTMLSelect flex={2}>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </HTMLSelect>
</InputGroup>
<InputGroup>
  <Input flex={3} value={1} />
  <HTMLSelect flex={2}>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
  </HTMLSelect>
</InputGroup>
content_copy
Copy
live example

Form Controls

Wrapper component to list FormControls

import { FormControl, FormControls } from '@passfort/castle'
content_copy
Copy

<FormControls>
  <FormControl isRequired>
    <FormLabel>Name</FormLabel>
    <Input />
    <FormHint>Your legal name</FormHint>
  </FormControl>

  <InputGroup>
    <FormControl flex={2} isRequired>
      <FormLabel>National ID</FormLabel>
      <Input />
    </FormControl>

    <FormControl isRequired>
      <FormLabel>Country</FormLabel>
      <Input />
    </FormControl>
  </InputGroup>
</FormControls>
<FormControls>
  <FormControl isRequired>
    <FormLabel>Name</FormLabel>
    <Input />
    <FormHint>Your legal name</FormHint>
  </FormControl>

  <InputGroup>
    <FormControl flex={2} isRequired>
      <FormLabel>National ID</FormLabel>
      <Input />
    </FormControl>

    <FormControl isRequired>
      <FormLabel>Country</FormLabel>
      <Input />
    </FormControl>
  </InputGroup>
</FormControls>
content_copy
Copy
live example

Native Validation

If you are not using some other type of form validation, you can set nativeValidation to use in-built HTML form validation.

<FormControls
  nativeValidation
  onSubmit={(e) => {
    e.preventDefault()
    log('Form submitted!')
  }}
>
  <FormControl isRequired>
    <FormLabel>Name</FormLabel>
    <Input />
    <FormHint>Your legal name</FormHint>
  </FormControl>
  <FormControl isRequired>
    <FormLabel>Email</FormLabel>
    <Input type="email" />
  </FormControl>
  <Button type="submit">Submit</Button>
</FormControls>
<FormControls
  nativeValidation
  onSubmit={(e) => {
    e.preventDefault()
    log('Form submitted!')
  }}
>
  <FormControl isRequired>
    <FormLabel>Name</FormLabel>
    <Input />
    <FormHint>Your legal name</FormHint>
  </FormControl>
  <FormControl isRequired>
    <FormLabel>Email</FormLabel>
    <Input type="email" />
  </FormControl>
  <Button type="submit">Submit</Button>
</FormControls>
content_copy
Copy
live example

You can also disable native validation by passing noValidate to form HTML element:

<Box
  as="form"
  noValidate
  onSubmit={(e) => {
    e.preventDefault()
    log('Form submitted!')
  }}
>
  <FormControl isRequired>
    <FormLabel>Name</FormLabel>
    <Input />
    <FormHint>Your legal name</FormHint>
  </FormControl>
  <Button type="submit">Submit</Button>
</Box>
<Box
  as="form"
  noValidate
  onSubmit={(e) => {
    e.preventDefault()
    log('Form submitted!')
  }}
>
  <FormControl isRequired>
    <FormLabel>Name</FormLabel>
    <Input />
    <FormHint>Your legal name</FormHint>
  </FormControl>
  <Button type="submit">Submit</Button>
</Box>
content_copy
Copy
live example