Podo UI

Podo UI

Field

A form field wrapper component that includes labels and helper text.

Overview

The Field component helps you easily add labels and helper text to input elements.

Live Example:
Enter the email address you'll use to log in
Enter a password with at least 8 characters

React Usage

How to use the Field component in React.

HTML
import { Field } from 'podo-ui';

return function MyForm() {
  return (
    <div>
      <Field label="Email" helper="Enter the email address you'll use to log in">
        <input type="email" placeholder="[email protected]" />
      </Field>

      <Field label="Password" helper="Enter a password with at least 8 characters">
        <input type="password" placeholder="Enter password" />
      </Field>

      <Field label="Description" helper="Enter a detailed description">
        <textarea rows={4} placeholder="Enter content..."></textarea>
      </Field>

      <Field label="Category">
        <select>
          <option value="" disabled selected>Select category</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
        </select>
      </Field>
    </div>
  );
}

Structure

The Field component has the following structure:

  • label: Label for the input field
  • children: Input element (input, select, textarea, etc.)
  • helper: Helper text for the input field (optional)

SCSS Styling

You can apply Field styles using podo-ui mixins.

field.module.scss
@use 'podo-ui/mixin' as *;

.style {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: s(3);

  // 자식 요소 (input, select 등)
  > div.child {
    width: 100%;

    > :not(:last-child) {
      display: inline-block;
      margin-right: s(5);
    }
  }

  // 도움말 텍스트
  > div.helper {
    @include p4;
    color: color(text-sub);
  }
}