@comparaonline/ui-fieldset

Fieldset

The fieldset component is the basic layout component that receives a set of inputs, title and a subtitle.

Usage

You need to pass as a children everything that you want to wrap.

import React from 'react';
import { Fieldset } from '@comparaonline/ui-fieldset';
import { TextField } from '@comparaonline/ui-form-fields';

const QuestionGroup: React.SFC<any> = () => (
  <Fieldset
    title="Ingrese sus datos"
    subtitle="Estos datos son muy importantes"
  >
    <TextField {...} />
  </Fieldset>
);

Options

You can set the variant component and align to the title and subtitle text throught props.

import React from 'react';
import { Fieldset } from '@comparaonline/ui-fieldset';
import { TextField } from '@comparaonline/ui-form-fields';

const QuestionGroup: React.SFC<any> = () => (
  <Fieldset
    title="Ingrese sus datos"
    titleAlign="center"
    titleVariant="h1"
    title="Estos datos son muy importantes"
    titleAlign="right"
    titleVariant="body2"
  >
    <TextField {...} />
  </Fieldset>
);