Radio

A Radio picks one option from a set. A RadioGroup links its radios by name and marks the selected one.

Usage#

import { Radio, RadioGroup } from "@clawscale/react";

<RadioGroup name="codec" onChange={(event) => setCodec(event.currentTarget.value)} selectedValue={codec}>
  <Radio label="zstd" value="zstd" />
  <Radio label="gzip" value="gzip" />
</RadioGroup>

RadioGroup is always controlled, so onChange is required. Always pass a name. Without one, the group generates a name that differs between the server and the client render.

Examples#

Options#

options renders one radio per item. The item whose value matches selectedValue is checked.

zstdgzipsnappyNo compression

core/radio/basic.tsx

import { RadioGroup } from "@clawscale/react";
import { useState } from "react";

const CODECS = [
  { label: "zstd", value: "zstd" },
  { label: "gzip", value: "gzip" },
  { label: "snappy", value: "snappy" },
  { label: "No compression", value: "none" },
];

export default function RadioBasic() {
  const [codec, setCodec] = useState("zstd");
  return (
    <RadioGroup
      name="radio-codec"
      onChange={(event) => setCodec(event.currentTarget.value)}
      options={CODECS}
      selectedValue={codec}
    />
  );
}

Radio children#

Pass Radio elements instead of options for labels with markup. The group sets checked, name and onChange on each one.

Append adds new rowsMerge upserts on the primary keyOverwrite replaces the partition

core/radio/children.tsx

import { Classes, Radio, RadioGroup } from "@clawscale/react";
import { useState } from "react";

export default function RadioChildren() {
  const [mode, setMode] = useState("append");
  return (
    <RadioGroup name="radio-write-mode" onChange={(event) => setMode(event.currentTarget.value)} selectedValue={mode}>
      <Radio value="append">
        Append <span className={Classes.TEXT_MUTED}>adds new rows</span>
      </Radio>
      <Radio value="merge">
        Merge <span className={Classes.TEXT_MUTED}>upserts on the primary key</span>
      </Radio>
      <Radio value="overwrite">
        Overwrite <span className={Classes.TEXT_MUTED}>replaces the partition</span>
      </Radio>
    </RadioGroup>
  );
}

Inline#

inline places the radios on one line.

HourDayWeekMonth

core/radio/inline.tsx

import { RadioGroup } from "@clawscale/react";
import { useState } from "react";

const GRANULARITY = [
  { label: "Hour", value: "hour" },
  { label: "Day", value: "day" },
  { label: "Week", value: "week" },
  { label: "Month", value: "month" },
];

export default function RadioInline() {
  const [granularity, setGranularity] = useState("day");
  return (
    <RadioGroup
      inline
      name="radio-granularity"
      onChange={(event) => setGranularity(event.currentTarget.value)}
      options={GRANULARITY}
      selectedValue={granularity}
    />
  );
}

Disabled#

Set disabled on an option to block it. Set it on the group to block every option.

eu-west-1us-east-1ap-southeast-2 (at capacity)

core/radio/disabled.tsx

import { RadioGroup } from "@clawscale/react";
import { useState } from "react";

const REGIONS = [
  { label: "eu-west-1", value: "eu-west-1" },
  { label: "us-east-1", value: "us-east-1" },
  { disabled: true, label: "ap-southeast-2 (at capacity)", value: "ap-southeast-2" },
];

export default function RadioDisabled() {
  const [region, setRegion] = useState("eu-west-1");
  return (
    <RadioGroup
      name="radio-region"
      onChange={(event) => setRegion(event.currentTarget.value)}
      options={REGIONS}
      selectedValue={region}
    />
  );
}

Controlled#

The selected value is your state. Read it from event.currentTarget.value, use it anywhere and set it from outside the group.

30 days90 days365 days

Partitions older than 90 days are deleted at 02:00 UTC.

core/radio/controlled.tsx

import { Button, Classes, RadioGroup } from "@clawscale/react";
import { useState } from "react";

const RETENTION = [
  { label: "30 days", value: "30" },
  { label: "90 days", value: "90" },
  { label: "365 days", value: "365" },
];

export default function RadioControlled() {
  const [days, setDays] = useState("90");
  return (
    <div>
      <RadioGroup
        name="radio-retention"
        onChange={(event) => setDays(event.currentTarget.value)}
        options={RETENTION}
        selectedValue={days}
      />
      <p className={Classes.TEXT_MUTED}>Partitions older than {days} days are deleted at 02:00 UTC.</p>
      <Button size="small" text="Reset to 90 days" onClick={() => setDays("90")} />
    </div>
  );
}

Props interface#

Radio also accepts the HTML attributes of an <input>.

interface RadioGroupProps extends Props, HTMLDivProps@clawscale/react

Props	Description
`children`	`React.ReactNode` Radio elements. This prop is mutually exclusive with `options`. If passing custom children, ensure options have `role="radio"` or `input` with `type="radio"`.
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`disabled`	`boolean` Whether the group and _all_ its radios are disabled. Individual radios can be disabled using their `disabled` prop.
`inline`	`boolean` Whether the radio buttons are to be displayed inline horizontally.
`label`	`React.ReactNode` Optional label text to display above the radio buttons.
`name`	`string` Name of the group, used to link radio buttons together in HTML. If omitted, a unique name will be generated internally.
`onChange`required	`(event: React.ChangeEvent<HTMLInputElement>) => void` Callback invoked when the currently selected radio changes. Use `event.currentTarget.value` to read the currently selected value. This prop is required because this component only supports controlled usage.
`options`	`readonly OptionProps[]` Array of options to render in the group. This prop is mutually exclusive with `children`: either provide an array of `OptionProps` objects or provide `<Radio>` children elements.
`selectedValue`	`string \| number` Value of the selected radio. The child with this value will be `:checked`.

type RadioProps@clawscale/react

Radio component props.

Props	Description
`alignIndicator`	`Alignment` = `Alignment.START` Alignment of the indicator within container. Inherited from `ControlProps`
`checked`	`boolean` Whether the control is checked. Inherited from `CheckedControlProps`
`children`	`React.ReactNode` JSX label for the control. Inherited from `ControlProps`
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`defaultChecked`	`boolean` Whether the control is initially checked (uncontrolled mode). Inherited from `CheckedControlProps`
`disabled`	`boolean` Whether the control is non-interactive. Inherited from `ControlProps`
`inline`	`boolean` Whether the control should appear as an inline element. Inherited from `ControlProps`
`inputRef`	`React.Ref<HTMLInputElement>` Ref attached to the HTML `<input>` element backing this component. Inherited from `ControlProps`
`label`	`string` Text label for the control. Inherited from `ControlProps`
`labelElement`	`React.ReactNode` JSX element label for the control. Inherited from `ControlProps`
`large`deprecated	`boolean` = `false` Whether this control should use large styles. use `size="large"` instead Inherited from `ControlProps`
`onChange`	`React.ChangeEventHandler<HTMLInputElement>` Event handler invoked when input value is changed. Inherited from `CheckedControlProps`
`size`	`NonSmallSize` = `"medium"` Size of the control. Inherited from `ControlProps`
`tagName`	`keyof React.JSX.IntrinsicElements` = `"label"` Name of the HTML tag that wraps the checkbox. Inherited from `ControlProps`

interface OptionProps extends Props@clawscale/react

Props	Description
`className`	`string` A space-delimited list of class names to pass along to a child element. Inherited from `Props`
`disabled`	`boolean` Whether this option is non-interactive.
`label`	`string` Label text for this option. If omitted, `value` is used as the label.
`value`required	`T` Value of this option.