Radio card

Radio input with built-in layouting subcomponents

Radio inputs are generally used in radio groups—collections of radio buttons describing a set of related options. Only one radio button in a given group can be selected at the same time. Check out the forms info page in the sidebar for more info regarding FormControls.

For certain uses in Freelancer (e.g., post job page), the limited width of radio cards can cause image icons to be vertically centered while text content starts at the top, creating visual misalignment. The Image Alignment feature resolves this issue by providing a 'imageAlignment' input that allows icons to be positioned at the top or center of the card, ensuring proper alignment with the title and description text.

center

Project type icon Recommended

Post a project

Get free quotes from freelancers. Ideal for detailed, non-visual, or complex projects.

Contest type icon

Start a contest

Crowdsource ideas with a prize. Ideal for visual designs, open innovation & big challenges.

top

Project type icon Recommended

Post a project

Get free quotes from freelancers. Ideal for detailed, non-visual, or complex projects.

Contest type icon

Start a contest

Crowdsource ideas with a prize. Ideal for visual designs, open innovation & big challenges.

Inputs
control : FormControl<T>
isSelected : boolean
pictureAlt : string
value : T extends T ? T : T
backgroundColor ?: BackgroundColor
border ?: any = CardBorder.NONE
hoverColor ?: HoverColor = HoverColor.MID
imageAlignment ?: ImageAlignment = ImageAlignment.CENTER
level ?: any = CardLevel.PRIMARY
padding ?: RadioCardPadding = RadioCardPadding.MID
pictureSrc ?: string
selectedColor ?: RadioCardSelectedColor = RadioCardSelectedColor.SECONDARY
showRadio ?: boolean = false