Field

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

Demo

React

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 occupationSoftware EngineerProduct ManagerDesignerSelect your occupation

Bio

Please 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

Example

React

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

return (
  <Field.Root
    label="First name"
    required
  >
    <Field.Input placeholder="John" />

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

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

  <Field.Root
    label="Last name"
    required
  >
    <Field.Input placeholder="Doe" />

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

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

  <Field.Root
    label="Occupation"
    required
  >
    <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 label="Bio">
    <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
    label="First name"
    required
  >
    <Field.Input placeholder="John" />

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

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

  <Field.Root
    label="Last name"
    required
  >
    <Field.Input placeholder="Doe" />

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

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

  <Field.Root
    label="Occupation"
    required
  >
    <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 label="Bio">
    <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	Default	Description
label	string		Label of the field
orientation	Orientation	vertical	Orientation of the field
size	Size	md	Size of the field
clearable	boolean	false	Reserve the space for the clear trigger
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	Default	Description
label	string		Label of the field
orientation	Orientation	vertical	Orientation of the field
size	Size	md	Size of the field
clearable	boolean	false	Reserve the space for the clear trigger
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'