Skip to content

Latest commit

 

History

History
56 lines (50 loc) · 2.75 KB

readme.md

File metadata and controls

56 lines (50 loc) · 2.75 KB
Raw

RadioButtonGroup

Convenient wrapper component for sets of radio buttons. Will pass name prop as well as other shared props down to <RadioButton> children. The component will automatically render radio buttons within a <FieldGroup> with the value for the label prop applied as a <legend>. Non-<RadioButton> children can also be passed for alternative layouts, but RadioButtons should still be direct descendants.

Usage

Example with react-final-form:

<Field label="Acting as" name="subGroup" component={RadioButtonGroup}>
  <RadioButton label="self" id="actingAsSelf" value="self" />
  <h4>Sponsor</h4>
  <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
  <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
  <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
  <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
</Field>

Example with react-final-form via render-prop:

<Field name="subGroup" render={(props) =>
  <RadioButtonGroup {...props} label="Acting as">
    <RadioButton label="self" id="actingAsSelf" value="self" />
    <h4>Sponsor</h4>
    <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
    <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
    <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
    <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
  </RadioButtonGroup>
} />

Example with redux-form:

<Field label="Acting as" name="subGroup" component={RadioButtonGroup}>
  <RadioButton label="self" id="actingAsSelf" value="self" />
  <h4>Sponsor</h4>
  <RadioButton label="Abbot, Cody" id="actingSponsor001" value="sponsor001" inline />
  <RadioButton label="Doe, John" id="actingSponsor002" value="sponsor002" inline />
  <RadioButton label="Martin, Danforth" id="actingSponsor003" value="sponsor003" inline />
  <RadioButton label="James, Phillip" id="actingSponsor004" value="sponsor004" inline />
</Field>

Props

Name type description default required
children node or array of nodes Set of <RadioButton>s for usage. Can include other tags (headers, spans, etc.) ✔
error string or node Error message to display
label string or node Content to render in the <legend> tag of the created <fieldset>.
onBlur func
onChange func
onFocus func
value string Sets default value for radio button set - Not necessary for redux-form - will use the form's initialValues prop instead
warning string or node Warning text to display