Field

Field displays a field that is used as the base component to create fields.

Import

import { Field } from "@prismane/core";

Field component has the following inner components:

- Field.Error - The container that displays the error that the field has.
- Field.Label - The container that displays the label of the field.
- Field.Wrapper - The container that wraps the whole field into one.
- Field.Addon - The additional container that can show information on the right or left side of the input.

Usage

<Field type="text" placeholder="Simple Demo Field" />

Field Variants

<>
  <Field variant="outlined" type="text" placeholder="Outlined Field" />
  <Field variant="filled" type="text" placeholder="Filled Field" />
  <Field variant="underlined" type="text" placeholder="Underlined Field" />
  <Field variant="unstyled" type="text" placeholder="Unstyled Field" />
</>

Field Sizes

<Flex direction="column" gap={fr(2)}>
  <Field size="xs" type="text" placeholder="xs Field" />
  <Field size="sm" type="text" placeholder="sm Field" />
  <Field size="base" type="text" placeholder="base Field" />
  <Field size="md" type="text" placeholder="md Field" />
  <Field size="lg" type="text" placeholder="lg Field" />
</Flex>

Field With Icon

<Field icon={<GearSix />} type="text" placeholder="Simple Demo Field" />

Field With Addon

By default, Field.Addon is rendered on the right side, but by providing the position prop, you can change it.

<Field
  addons={
    <>
      <Field.Addon position="left">Hello</Field.Addon>
      <Field.Addon>World</Field.Addon>
    </>
  }
  type="text"
  placeholder="Simple Demo Field"
/>

Complex Field

<Field.Wrapper>
  <Field.Label for="hashtag">Hashtag:</Field.Label>
  <Field
    name="hashtag"
    addons={<Field.Addon position="left">#</Field.Addon>}
    type="text"
    placeholder="Enter hashtag"
  />
  <Field.Error>Some static error!</Field.Error>
</Field.Wrapper>

Versatile Component

<Field as="select" placeholder="Simple Demo Field">
  <option>1</option>
  <option>2</option>
  <option>3</option>
</Field>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

- Field

Go BackDrawer

Up NextFlex