@chakra-ui/core
Version:
Responsive and accessible React UI components built with React and Emotion
73 lines (68 loc) • 1.96 kB
TypeScript
import * as React from "react";
import { BoxProps } from "../Box";
import { Omit } from "../common-types";
export interface IRadio {
/**
* id assigned to input
*/
id?: string;
/**
* The name of the input field in a radio
* (Useful for form submission).
*/
name?: string;
/**
* The value to be used in the radio button.
* This is the value that will be returned on form submission.
*/
value?: string | number;
/**
* The aria-label attribute associated with the radio element
*/
"aria-label"?: string;
/**
* The aria-labelledby attribute associated with the radio element
*/
"aria-labelledby"?: string;
/**
* The color scheme of the radio.
*
* 🚨Note: This should be one of the color keys in the theme that has `100` - `900` color values (e.g.`green`, `red`).
* @see http://chakra-ui.com/theme#colors
*/
variantColor?: string;
/**
* If `true`, the radio will be initially checked.
*/
defaultIsChecked?: boolean;
/**
* If `true`, the radio will be checked.
* You'll need to pass `onChange` to update it's value (since it's now controlled)
*/
isChecked?: boolean;
/**
* If `true`, the radio will occupy the full width of it's parent container
*/
isFullWidth?: boolean;
/**
* The size of the radio button
*/
size?: "lg" | "md" | "sm";
/**
* If `true`, the radio will be disabled
*/
isDisabled?: boolean;
/**
* If `true`, the radio button will be invalid. This sets `aria-invalid` to `true`.
*/
isInvalid?: boolean;
onChange?: React.ChangeEventHandler<HTMLInputElement>;
onBlur?: React.FocusEventHandler<HTMLInputElement>;
onFocus?: React.FocusEventHandler<HTMLInputElement>;
children?: React.ReactNode;
}
export type RadioProps = IRadio &
Omit<BoxProps, "onChange" | "ref" | "onFocus" | "onBlur" | "size"> &
React.RefAttributes<HTMLInputElement>;
declare const Radio: React.FC<RadioProps>;
export default Radio;