Field

Provides a flexible container for form inputs, labels, and helper text.

Demo

React

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

First namePlease enter your first name

Last namePlease enter your last name

OccupationSelect an occupationSoftware EngineerProduct ManagerDesignerSelect your occupation

BioPlease type in your bio

Vue

OrientationHorizontalVertical

SizeExtra SmallSmallMediumLargeExtra Large

Required

Invalid

Read only

Disabled

First name Please enter your first name

Last name Please enter your last name

Occupation Select an occupation Software EngineerProduct ManagerDesigner Select your occupation

Bio Please type in your bio

Usage

React

import { Field } from '@fintech-sandpit/ui/react';

return (
  <Field.Root required>
    <Field.Label>
      First name

      <Field.RequiredIndicator />
    </Field.Label>

    <Field.Input placeholder="John" />

    <Field.ErrorText>
      Invalid first name
    </Field.ErrorText>

    <Field.HelperText>
      Please enter your first name
    </Field.HelperText>
  </Field.Root>

  <Field.Root required>
    <Field.Label>
      Last name

      <Field.RequiredIndicator />
    </Field.Label>

    <Field.Input placeholder="Doe" />

    <Field.ErrorText>
      Invalid last name
    </Field.ErrorText>

    <Field.HelperText>
      Please enter your last name
    </Field.HelperText>
  </Field.Root>

  <Field.Root required>
    <Field.Label>
      Occupation

      <Field.RequiredIndicator />
    </Field.Label>

    <Field.Select>
      <option disabled>
        Select an occupation
      </option>

      <option value="software-engineer">
        Software Engineer
      </option>

      <option value="product-manager">
        Product Manager
      </option>

      <option value="designer">
        Designer
      </option>
    </Field.Select>

    <Field.ErrorText>
      Invalid text
    </Field.ErrorText>

    <Field.HelperText>
      Select your occupation
    </Field.HelperText>
  </Field.Root>

  <Field.Root>
    <Field.Label>
      Bio
    </Field.Label>

    <Field.Textarea
      placeholder="Enter your bio here..."
      rows={3}
      autoresize
    />

    <Field.ErrorText>
      Invalid text
    </Field.ErrorText>

    <Field.HelperText>
      Please type in your bio
    </Field.HelperText>
  </Field.Root>
);

Vue

<script setup lang="ts">
import { Field } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <Field.Root required>
    <Field.Label>
      First name

      <Field.RequiredIndicator />
    </Field.Label>

    <Field.Input placeholder="John" />

    <Field.ErrorText>
      Invalid first name
    </Field.ErrorText>

    <Field.HelperText>
      Please enter your first name
    </Field.HelperText>
  </Field.Root>

  <Field.Root required>
    <Field.Label>
      Last name

      <Field.RequiredIndicator />
    </Field.Label>

    <Field.Input placeholder="Doe" />

    <Field.ErrorText>
      Invalid last name
    </Field.ErrorText>

    <Field.HelperText>
      Please enter your last name
    </Field.HelperText>
  </Field.Root>

  <Field.Root required>
    <Field.Label>
      Occupation

      <Field.RequiredIndicator />
    </Field.Label>

    <Field.Select>
      <option disabled>
        Select an occupation
      </option>

      <option value="software-engineer">
        Software Engineer
      </option>

      <option value="product-manager">
        Product Manager
      </option>

      <option value="designer">
        Designer
      </option>
    </Field.Select>

    <Field.ErrorText>
      Invalid text
    </Field.ErrorText>

    <Field.HelperText>
      Select your occupation
    </Field.HelperText>
  </Field.Root>

  <Field.Root>
    <Field.Label>
      Bio
    </Field.Label>

    <Field.Textarea
      placeholder="Enter your bio here..."
      rows="3"
      autoresize
    />

    <Field.ErrorText>
      Invalid text
    </Field.ErrorText>

    <Field.HelperText>
      Please type in your bio
    </Field.HelperText>
  </Field.Root>
</template>

Props

Field Root Props

React

Name	Type	Required	Default	Description
orientation	Orientation		vertical	Orientation of the field
size	Size		md	Size of the field
required	boolean		false	Whether the field is required
invalid	boolean		false	Whether the field is invalid
readOnly	boolean		false	Whether the field is read only
disabled	boolean		false	Whether the field is disabled

Vue

Name	Type	Required	Default	Description
orientation	Orientation		vertical	Orientation of the field
size	Size		md	Size of the field
required	boolean		false	Whether the field is required
invalid	boolean		false	Whether the field is invalid
read-only	boolean		false	Whether the field is read only
disabled	boolean		false	Whether the field is disabled

Types

type Orientation = 'horizontal' | 'vertical'
type Size = 'xs' | 'sm' | 'md' | 'lg' | 'xl'