Fieldset

import Fieldset from 'frui/fields/Fieldset';

Copy

Props

The following props are accepted by Fieldset.

Name	Type	Required	Notes
add	string	No	Add button text
className	string	No	Standard HTML class names applied to the add button
config	Object	No	Object that is directly passed to custom fieldset
defaultValue	string[]	No	Default value (uncontrolled)
emptyValue	any	No	Value used when creating a new fieldset
error	string\|boolean	No	Any error message
name	string	No	Used for react server components.
placeholder	string	No	Placeholders for input values.
onUpdate	Function	No	Event handler when value updates
style	CSS Object	No	Standard CSS object applied to the add button
value	string[]	No	Default value (controlled)

Basics

A Fieldset is a set of fields grouped together to be copied and processed as one field. Examples of fieldsets are Metadata and Textlist. The following shows how to create a basic fieldset:

//types
import type { FieldsProps, FieldsetProps } from 'frui/Fieldset';
//make fieldset
import make from 'frui/Fieldset';
//fields
export function InputFields(props: FieldsProps<string>) {
  const { values, index, error, set } = props;
  const handlers = {
    update: (value: string) => {
      const newValues = [ ...(values || []) ]
      newValues[index] = value;
      set(newValues);
    },
    remove: () => {
      const newValues = [ ...(values || []) ];
      newValues[index] = undefined;
      set(newValues);
    }
  };
  return (
    <div>
      <input 
        defaultValue={values ? values[index]: undefined} 
        onChange={e => handlers.update(e.target.value)} 
      />
      <button onClick={handlers.remove}>
        &times;
      </button>
    </div>
  );
};
//make fieldset
const Fieldset = make<string>(InputFields);
//ex. <InputList add="Add Input" value={['foo', 'bar']} />
export default function InputList(props: FieldsetProps<string>) {
  return (
    <Fieldset {...props} emptyValue="" />
  );
};

Copy

Custom Styles

You can add your own custom class to selects or use the frui-fieldset-add CSS class.

Datetime

File