Houzz UI

Basic Usage

Radio buttons are often arranged in a group of at least two options. The empty circle represents a "deselected" state and a circle with a dot inside for a selected state.

A user may choose only a single option or radio button among the set or group.

import { Radio } from '@houzz/ui';

<Box display="flex" flexDirection="column" m="2rem">
    <Grid cols="1fr 1fr" gaps="1rem" justifyItems="start" width="300px">
        <Radio labelText="Off" />
        <Radio labelText="Off" size="small" />
        <Radio disabled={true} labelText="Off Disabled" />
        <Radio disabled={true} labelText="Off Disabled" size="small" />
        <Radio checked={true} className="test-class" labelText="On" />
        <Radio checked={true} className="test-class" labelText="On" size="small" />
        <Radio checked={true} disabled={true} labelText="On Disabled" />
        <Radio checked={true} disabled={true} labelText="On Disabled" size="small" />
    </Grid>
</Box>

<Box display="flex" flexDirection="column" m="2rem">
    <Grid cols="1fr 1fr" gaps="1rem" justifyItems="start" width="300px">
        <Radio labelText="Off" />
        <Radio labelText="Off" size="small" />
        <Radio disabled={true} labelText="Off Disabled" />
        <Radio disabled={true} labelText="Off Disabled" size="small" />
        <Radio checked={true} className="test-class" labelText="On" />
        <Radio checked={true} className="test-class" labelText="On" size="small" />
        <Radio checked={true} disabled={true} labelText="On Disabled" />
        <Radio checked={true} disabled={true} labelText="On Disabled" size="small" />
    </Grid>
</Box>

Props

Radio

System Props

COMMON
TYPOGRAPHY
BORDER
LAYOUT
POSITION
FLEX
GRID
Learn More

Name	Type	Description
`gradient`	`ResponsiveValue<TLengthStyledSystem, Required<Theme<TLengthStyledSystem>>>`	-
`checked`	`boolean`	Whether the radio is checked or not.
`defaultChecked`	`boolean`	The default checked value, useful for uncontrolled radio buttons. https://reactjs.org/docs/uncontrolled-components.html#default-values
`className`	`string`	The class attached to the <label /> element (if labelText is present).
`disabled`	`boolean`	Makes radio input readonly.
`inputProps`	`Partial<Pick<Pick<Pick<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "hidden" \| ... 285 more ... \| "onTransitionEndCapture"> & ... 18 more ... & { ...; }, "bottom" \| ... 404 more ... \| "radioSize"> & Partial<...>, "bottom" \| ... 405 more ... \| "radioSize"> & { ...; }, "bottom" \| .....`	These props will be passed down into the radio input element. `type` prop is not accepted since its hardcoded to "radio".
`labelText`	`ReactNode`	Label text that describes the radio option. If not present, <label> will not be rendered--so make sure the radio is properly labeled.
`labelPosition`	`"left" \| "right"`	Label text position relative to the radio. By default it's placed on the right.
`labelAlignment`	`"top" \| "middle"`	Sets the vertical alignment of the control with multi-line, wrapped labels. By default, it's aligned to middle.
`name`	`string`	Name of the input form control. Submitted with the form as part of a name/value pair. Use the same name if multiple radios belong to the same group.
`onChange`	`(event: FormEvent<HTMLInputElement>) => void`	Event handler for the radio input. You can access the new value at event.target.value (string). You can access the new checked state at event.target.checked (boolean).
`value`	`string`	Current value of the form control. Submitted with the form as part of a name/value pair. If undefined, browsers default it to "on"

Accessibility

By default, Radio will wrap the input with a label. If a different UI is desired, ensure id is provided to Radio and properly associate a Label with htmlFor

RadioHealthy

Basic Usage

Props

System Props

Accessibility