-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add
RadioGroupField
component to make it easier to create radio gro…
…up fields in forms (#2400) You can now do: ```tsx <RadioGroupField label="Radio" name="radio" fullWidth options={[ { label: "Option One", value: "option-one", }, { label: "Option Two", value: "option-two", }, ]} /> ``` instead of: ```tsx <FieldContainer label="Radio" fullWidth> <Field name="radio" type="radio" value="option-one"> {(props) => <FormControlLabel label="Option One" control={<FinalFormRadio {...props} />} />} </Field> <Field name="radio" type="radio" value="option-two"> {(props) => <FormControlLabel label="Option Two" control={<FinalFormRadio {...props} />} />} </Field> </FieldContainer> ``` --------- Co-authored-by: Johannes Obermair <48853629+johnnyomair@users.noreply.github.com>
- Loading branch information
1 parent
bbb7536
commit 99a1f0a
Showing
4 changed files
with
143 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
--- | ||
"@comet/admin": minor | ||
--- | ||
|
||
Add `RadioGroupField` component to make it easier to create radio group fields in forms | ||
|
||
You can now do: | ||
|
||
```tsx | ||
<RadioGroupField | ||
label="Radio" | ||
name="radio" | ||
fullWidth | ||
options={[ | ||
{ | ||
label: "Option One", | ||
value: "option-one", | ||
}, | ||
{ | ||
label: "Option Two", | ||
value: "option-two", | ||
}, | ||
]} | ||
/> | ||
``` | ||
|
||
instead of: | ||
|
||
```tsx | ||
<FieldContainer label="Radio" fullWidth> | ||
<Field name="radio" type="radio" value="option-one"> | ||
{(props) => <FormControlLabel label="Option One" control={<FinalFormRadio {...props} />} />} | ||
</Field> | ||
<Field name="radio" type="radio" value="option-two"> | ||
{(props) => <FormControlLabel label="Option Two" control={<FinalFormRadio {...props} />} />} | ||
</Field> | ||
</FieldContainer> | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { FormControlLabel, RadioGroup } from "@mui/material"; | ||
import MuiRadio from "@mui/material/Radio"; | ||
import React from "react"; | ||
|
||
import { Field, FieldProps } from "../../form/Field"; | ||
|
||
type RadioGroupFieldOption<Value extends string> = { | ||
label: React.ReactNode; | ||
value: Value; | ||
}; | ||
|
||
export type RadioGroupFieldProps<Value extends string> = FieldProps<Value, HTMLInputElement> & { | ||
options: RadioGroupFieldOption<Value>[]; | ||
layout?: "row" | "column"; | ||
}; | ||
|
||
export const RadioGroupField = <Value extends string>({ options, layout = "row", ...restProps }: RadioGroupFieldProps<Value>) => { | ||
return ( | ||
<Field<Value> {...restProps}> | ||
{({ input: { checked, value, onBlur, onFocus, ...restInput } }) => ( | ||
<RadioGroup {...restInput} row={layout === "row"}> | ||
{options.map(({ value, label }) => ( | ||
<FormControlLabel key={value} label={label} value={value} control={<MuiRadio />} /> | ||
))} | ||
</RadioGroup> | ||
)} | ||
</Field> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters