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

Required Label

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