RadiobuttonsFabric component

Component for rendering a list of radio buttons.

📝 Signature

RadiobuttonsFabric(props: {
  styles: {
    backgroundColor: string;
    borderColor: string;
    borderSize?: number;
    textColor: string;
    scale?: number;
  };
  buttons: IRadiobutton[];
  disabled?: boolean;
  readOnly?: boolean;
  allowUnselect?: boolean;
  ariaDescribedBy?: string;
  tabIndex?: number;
  value?: string | Value;
  view?: "live" | "test" | "preview";
  onChange?: (value: string) => void;
  onFocus?: (e: FocusEvent) => void;
  onBlur?: (e: FocusEvent) => void;
  onAutoFocus?: (el: HTMLInputElement | null) => void;
  onSubmit?: () => void;
  onCancel?: () => void;
}): JSX.Element

📇 Props

Name	Type	Optional	Description
styles	object	No	Specifies the styles for the radiobuttons component. Supports the following styles: - backgroundColor: Background color for the radio buttons; - borderColor: Border color for the radio buttons; - borderSize: Optional border size in pixels for the radio buttons; - textColor: Text color for the component; - scale: Optional scale factor for the component (defaults to 1).
buttons	IRadiobutton[]	No	Specifies the radiobuttons (see IRadiobutton).
disabled	boolean	Yes	Specifies if the component is disabled.
readOnly	boolean	Yes	Specifies if the component is read-only.
allowUnselect	boolean	Yes	Specifies if unselecting is allowed for the component.
ariaDescribedBy	string	Yes	Specifies the aria-describedby identifier of the element that describes the component.
tabIndex	number	Yes	Specifies the tabindex for the component.
value	string | Value	Yes	Specifies the value for the component. When a string is specified, this is the initial value for the input control. When a Value is supplied, this initial value is retrieved from the Value instance. Changes made in the input control are automatically reflected to the Value instance.
autoSubmit	boolean	Yes	Specifies if the component gets submitted when the user selects a button.
view	"live" | "test" | "preview"	Yes	Specifies the view in which the component is shown.
onChange	(value: string) => void	Yes	Invoked when the value of the component is changed.
onFocus	(e: FocusEvent) => void	Yes	Invoked when the component gets focus.
onBlur	(e: FocusEvent) => void	Yes	Invoked when the component loses focus.
onAutoFocus	(el: HTMLInputElement | null) => void	Yes	Invoked when the HTML element of the component is available for auto-focus.
onSubmit	() => void	Yes	Invoked when the user presses the Shift + Enter key combination or the Tab key (this event is often used to go to the next input control in a form).
onCancel	() => void	Yes	Invoked when the user presses the Shift + Tab key combination (this event is often used to go to the previous input control in a form).

↩️ Return value

Returns the JSX.Element for the component.

👩‍💻 Example

import { RadiobuttonsFabric } from "@tripetto/runner-fabric/components/radiobuttons";

const RadiobuttonsFabricExample = () => (
  <RadiobuttonsFabric
    styles={{
      backgroundColor: "white",
      borderColor: "black",
      textColor: "black"
    }}
    buttons={[
      {
        id: "1",
        label: "Radiobutton 1"
      },
      {
        id: "2",
        label: "Radiobutton 2"
      }
    ]}
    onChange={(value) => console.log(`Selected radio button: ${value}`)}
  />
);

⛓️ Interfaces

---

🔗 IRadiobutton

Describes the interface for a radiobutton.

Type declaration

interface IRadiobutton {
  /* Identifier for the radiobutton. */
  id: string;

  /* Name for the radiobutton. */
  name: string;

  /* Label for the radiobutton. */
  label?: string | JSX.Element;

  /* Description for the radiobutton. */
  description?: string | JSX.Element;

  /* Value for the radiobutton. */
  value?: string;

  /* Tabindex for the radiobutton. */
  tabIndex?: number;
}