Develop ultra fast with Prismane 🎉
Field displays a field that is used as the base component to create fields.


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.


<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" />

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.Addon position="left">Hello</Field.Addon>
  placeholder="Simple Demo Field"

Complex Field

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

Versatile Component

<Field as="select" placeholder="Simple Demo Field">


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